2

我有以下 jQuery 代码：

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

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

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

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

4

1 回答 1

1

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

这意味着，你总是可以像这样陷入承诺

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

然后像这样称呼它

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

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

于 2012-08-28T22:52:44.063 回答