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

Question

场景：

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

示例：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");
        });

});

进一步了解：

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

如果我们不等待所有动画完成，幻灯片效果可能会在动画中途停止并恢复为上次点击的动画。

Answer 1

我用你的代码做了example。我希望它对你有用！

关键是使用一个计数器来显示你拥有的动画，并将一个函数作为每个回调函数传递：

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

你应该为你想要的每个jquery函数做一遍，通知你它已经完成了。

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

当动画的计数器完成等于总动画计数器时，则调用一个函数并重置计数器。

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