Question

我开始使用jQuery创建一个非常复杂的动画，我正在寻找一种将元素组合在一起的特定方法。我在下面编写了一些代码，我可以用它来动画多个元素：

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

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

Answer 1

<强>解

您可以使用promise()来调用要执行的函数，而不是animate的内置回调。这可确保在动画两个元素后，done中的函数仅被称为。 这基本上就像你在问#firstElement＆amp; #secondElement向JS承诺，它会在完成两个操作时通知您，以便您可以附加done处理程序。

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

DEMO

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

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

promise

文档：http://api.jquery.com/promise/
它的作用：确保绑定到集合（排队或非排队）的特定类型的所有操作都已完成。

<强> done

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

在动画两个对象时仅触发一次回调

1 个答案: