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为动画元素提供的Deferred / promise对象（以及其他内容，如XHR请求）。

这意味着，您可以随时加入承诺

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

然后将其称为

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

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

等待jQuery动画完成

1 个答案: