在设置两个对象的动画时只触发一次回调

Fire a callback only once on animating two objects

本文关键字：回调 一次 设置 两个 对象 动画      更新时间：2023-09-26

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

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

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

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

解决方案

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

$(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/
  • 它的作用：添加在promise被解析时要调用的处理程序
相关文章：