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，当给定元素上的所有动画都已完成时，将会解析{{3}}。此外，文档说：

在没有活动动画的集合上使用.promise（）会返回a 解决了承诺。

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

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

Answer 2

您可以将第二个动画的代码封装在一个函数中，然后在第一个动画或的回调中调用该函数，如果第一个动画没有发生则调用它。假设这个想法是缩小一些其他具有“扩展框”类的控件，而不是之前的点击：

$('.box').on('click', function() {
    var $this = $(this),
        $exp = $(".expanded-box");

    function grow() {
       $this.animate({
           width: "200px", height: "100px"
       }).addClass('expanded-box');
    }

    if ($exp.length > 0) {
       $exp.animate({
           width: "100px", height: "50px"
       }, grow).removeClass("expanded-box");
    } else {
       grow();
    }        
});

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

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

2 个答案: