如何侦听与要完成的对象相关的所有Jquery动画

How to Listen for all Jquery Animations related to an object to be complete

本文关键字：Jquery 动画 对象 何侦听      更新时间：2023-09-26

场景：

  • 一个动画可以调用多次
  • 动画由另一个事件（如单击事件）调用
  • 在确定涉及此结构的所有其他动画事件都已完成之前，不应激发动画

示例：http://jsfiddle.net/xo6ngbfz/

jQuery( document ).ready(function() {
    console.log('run');
        jQuery("#animation-object").bind("fire-hide", function () {
            jQuery(this).toggle();
        });
        jQuery('#element').on('click', function () {
            console.log('click');
            jQuery('*').trigger("fire-hide");
        });
});

进一步了解：

这是一个非常简单的动画；但比如说有人有一套瓷砖。点击链接后，这些瓷砖在屏幕上上上下滑动。

如果我们不等待所有动画完成，幻灯片效果可能会在动画进行到一半时停止，并恢复到上次单击的动画。

我用您的代码做了一个例子。我希望它能对你有用！

关键是使用一个计数器来计算所有动画，并传递一个函数作为每个动画的回调：

jQuery(this).toggle("slow", animationFinished);

你应该为你想要的每个jquery函数做这件事，它会通知你它已经完成了。

（当函数不接受回调时，在它之后调用animationFinished（）就足够了，请参见示例的第14行）。

当动画的计数器已完成等于总动画计数器时，将调用一个函数并重新设置计数器的种子。

这不是最好的方法，因为每次添加动画时，都必须修改totalAnimations计数器，但至少目前是一个选项。

相关文章：