javascript - 在动画两个对象时只触发一次回调

Question

我开始用 jQuery 制作一个相当复杂的动画，我一直在寻找一种将元素一起制作动画的方法。我编写的代码有点如下，我可以用它来为多个元素制作动画：

这是小提琴：http: //jsfiddle.net/wkhrU/

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

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

Answer 1

解决方案

您可以使用 apromise()来调用要执行的函数，而不是animate. 这确保了仅在对两个元素进行动画处理后才done调用函数 in。这基本上就像您在要求&向 JS 承诺，当它们都完成时它会通知您，以便您可以将处理程序附加到它。#firstElement#secondElementdone

$(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/
• 它的作用：确保绑定到集合的特定类型的所有操作（无论是否排队）都已完成。

done

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