jquery - jQuery 中的同步动画，不使用回调？

Question

我无法使用回调，因为我有这样的场景(伪代码):

$('.box').on('click', function() {
    $('.expanded-box').animate({
        // shrink it
    });

    $(this).animate({
        // grow it
        $(this).addClass('expanded-box');
    });
});

我无法将展开动画放入 expanded-box 增长动画的回调中，因为它可能并不总是发生。但我需要第二个动画才能等到前一个动画完成。我怎样才能做到这一点？

Answer 1

从 jQuery 1.6 开始，您可以使用 promise()获得 Promise object当给定元素上的所有动画完成时，该问题将得到解决。此外，文档中还提到:

Using .promise() on a collection with no active animation returns a resolved Promise.

因此，它非常适合您的用例，您可以编写:

$('.box').on('click', function() {
    var $this = $(this);
    $('.expanded-box').animate({
        // shrink it
    }).promise().done(function() {
        $this.animate({
            // grow it
        }).addClass('expanded-box');
    });
});