等待 jQuery 动画完成

Question

我有以下 jQuery 代码：

var id = $(this).data('id');
if ($('#container').is(':visible'))
{
    $('#container').slideToggle('fast', function() {
        $('#' + id).toggle();
    });
}
else
{
    $('#' + id).toggle(0, function() {
        $('#container').slideToggle('fast');
    });
}

这段代码包含在一个更大的方法中，我不会在这里发布。该方法负责在一组按钮的样式和行为之间进行切换，并且在上面的代码中，当按下按钮时显示/隐藏一个容器。如果当前按下按钮（因此显示容器）但用户单击另一个按钮，则首先在当前按下的按钮上调用上述方法以隐藏其容器，然后在刚刚单击的按钮上调用以显示 它的容器。

问题是在为刚刚按下的按钮执行方法之前，当前按下的按钮的动画没有完成（或者甚至没有像我在调试时观察到的那样开始）。

有谁知道如何让代码在从这个方法返回之前等待动画队列清空？

Answer 1

您应该使用 jQuery 为动画元素（以及其他东西，如 XHR 请求）提供的 Deferred / promise 对象。

这意味着，你总是可以像这样挂钩一个承诺

function foo() {
    return $('#someElement').slideToggle('fast', function() {
    }).promise();
}

然后像这样称呼它

foo().done(function() {
    alert('animation finished');
}

演示：http://jsfiddle.net/dCVnG/