javascript - 如何在课堂上多次调用“动画”？

Question

我在课堂上有方法：

function myClass(){

    this.showTab = function(){

        $('#tab-image').stop().animate(
            { left: 500 + 'px' },
            500 , function(){
                alert('end');
            }
        );

    }

}

我调用了这个方法两次：

var obj = new myClass();
obj.showTab();
$('#tab-image').css({ left: -500 + 'px' });
obj.showTab();

此代码有效，但在第二次显示时没有动画。如何做好？

Answer 1

animate 函数以异步模式运行。这意味着第二个动画不会等到第一个动画完成，因此，两者都是并行执行的。这就是为什么动画有第二个参数：设置将在动画完成后执行的回调函数。

这应该有效：

function myClass() {

    this.showTab = function(callback) {

        $('#tab-image').stop().animate({
            left: 500 + 'px'
        }, 500, callback);

    }

}

var obj = new myClass();
obj.showTab(function() {
    $('#tab-image').css({
        'left': -500 + 'px'
    });
    obj.showTab();
});​

或者，如果您需要在回调函数之前执行其他操作：

function myClass() {

    this.showTab = function(callback) {

        $('#tab-image').stop().animate({
            left: 500 + 'px'
        }, 500, function() {
            //Insert your code here
            if(typeof callback === "function") callback();
        });

    }

}

希望这能解决您的问题！

Answer 2

我认为这是由动画效果的快速建立引起的。

为了防止这种情况，您应该做的是将两个参数传递给 stop() 方法；

  stop(true, true)

这将导致效果队列被清除队列并跳转到最后。