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对象,该对象将在给定元素上的所有动画完成后解析.另外,文档说:

在没有活动动画的集合上使用.promise()将返回已解析的Promise.

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

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