jQuery动画“完成”回调的正确语法答案

【问题标题】：Correct syntax for jQuery animate "complete" callbackjQuery动画“完成”回调的正确语法
【发布时间】：2013-08-22 07:38:14
【问题描述】：

当 jQuery 动画完成时，我必须使用回调函数。我一直是这样的：

.animate({ properties }, duration, function() { /* callback */ });

但是，当我在这里提出问题时，有人提出了一个具有不同语法的解决方案。

$('#redirectNoticeContainer').animate({ properties }, { queue: false, duration: 123 });

我应该把回调函数放在哪里？这是我的猜测，但它不起作用。

$('#redirectNoticeContainer').animate({ properties }, { queue: false, duration: 123 }, function () {
console.log("ok");
setTimeout(function () { window.location.replace("/Account/Login"); }, 1200);
});

动画有效。回调没有。我应该把它放在哪里？

【问题讨论】：

api.jquery.com/animate

标签： jquery jquery-animate

【解决方案1】：

That form of animate() 采用 complete 选项：

$("#redirectNoticeContainer").animate({
    // properties...
}, {
    queue: false,
    duration: 123,
    complete: function() {
        console.log("ok");
        setTimeout(function() {
            window.location.replace("/Account/Login");
        }, 1200);
    }
});

【讨论】：

【解决方案2】：

你也可以从 jquery 1.6 开始使用'promises'

$('.play-button').animate({ opacity: 0 }).promise().done(function ()
{
     $('.video').addClass('playing');
});

另见How to get jQuery to wait until an effect is finished?

【讨论】：