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

我开始用jQuery制作一个相当复杂的动画，我正在寻找一种将元素动画化的方法。我编写的代码大致如下，我可以使用它将多个元素动画化：

这是小提琴：

---

但是，回调函数触发两次，即每次为内部元素触发一次。我想做的是在相同的时间段内同时设置多个元素的动画，完成后，在其中触发一个调用，我想交换元素的

id

attrib。我不能在这里做同样的事情，因为在完成回调时，它交换

id

s一次，在下一个函数回调时，再次交换它们。实现这一目标的适当方法是什么？

解决方案

您可以使用

promise（）

调用要执行的函数，而不是

animate

的内置回调。这确保在设置两个元素的动画后，仅调用

done

中的函数。这基本上就像你在要求

#firstElement

&

#secondElement

向JS承诺，当这两个元素都完成时，它会通知JS，这样你就可以向它附加一个

done

处理程序

演示

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

承诺

• 文件：
• 它的作用：确保绑定到集合的特定类型的所有操作（无论是否排队）都已完成

完成

• 文件：
• 它的作用：添加在承诺得到解决时调用的处理程序

---

解决方案
您可以使用

promise（）

调用要执行的函数，而不是

animate

的内置回调。这确保在设置两个元素的动画后，仅调用

done

中的函数。这基本上就像你在要求

#firstElement

&

#secondElement

向JS承诺，当这两个元素都完成时，它会通知JS，这样你就可以向它附加一个

done

处理程序
演示
有关所用方法的更多信息：

承诺

• 文件：
• 它的作用：确保绑定到集合的特定类型的所有操作（无论是否排队）都已完成

完成

• 文件：
• 它的作用：添加在承诺得到解决时调用的处理程序

---

这很有希望！谢谢。：）这很有希望！谢谢。：）

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

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