javascript - 为两个对象设置动画时仅触发一次回调

Question

我开始用 jQuery 制作一个相当复杂的动画，我正在寻找一种将元素组合在一起的动画方式。我编写了如下代码，我可以用它来为多个元素一起制作动画:

这是 fiddle :http://jsfiddle.net/wkhrU/

$(document).ready(function(){
    $('#firstElement, #secondElement').animate(
        {left : '+=400px'}, 
        500,
        "linear",
        function(){
            alert("completed");
        });
});

但是，回调函数会触发两次，即每次针对内部元素。我一直在寻找的是在相同的持续时间内同时为多个元素设置动画，并在完成后触发一个调用，我想在其中交换元素的 id 属性。我不能在这里做同样的事情，因为在完成回调时，它交换一次 id，在下一个函数回调中，再次交换它们。实现这一目标的合适方法是什么？

Answer 1

解决方案

您可以使用 promise() 来调用要执行的函数，而不是 animate 的内置回调。这确保了 done 中的函数在为两个元素设置动画后仅被调用。 这基本上就像你要求 #firstElement 和 #secondElement 向 JS promise ，当两个都完成时它会通知你，这样你就可以附加一个完成处理程序。

$(document).ready(function () {
    $('#firstElement, #secondElement').animate({
        left: '+=400px'
    },
    500, "linear").promise().done(function () {
        alert("completed");
    });
});

演示

http://jsfiddle.net/hungerpain/wkhrU/1/

有关所用方法的更多信息:

promise

• 文档:http://api.jquery.com/promise/
• 它的作用:确保绑定(bind)到集合的特定类型的所有操作，无论是否排队，都已完成。

完成

• 文档:http://api.jquery.com/deferred.done/
• 它的作用:添加处理程序以在解决 promise 时调用。