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有第二个参数：设置一个将在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)

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

如何从课堂上多次打电话“动画”？

2 个答案: