jQuery的，多个动画后调用回调函数只有一次

比方说，我有一次运行多个动画，我要再次呼吁所有的人都完成了功能。jQuery的，多个动画后调用回调函数只有一次

只有一个动画，很容易;这有一个回调。例如：

$(".myclass").fadeOut(slow,mycallback);

麻烦的是，如果我的选择找到几个项目，则回调会被调用为他们每个人。

一种解决方法是不是太硬;例如：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Example</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var $mc=$(".myclass"),l=$mc.length; 
     $mc.fadeOut("slow",function(){ 
     if (! --l) $("#target").append("<p>All done.</p>"); 
     }); 
    }); 
    </script> 
    <style type="text/css"> 
    </style> 
</head> 
<body> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <div id="target"></div> 
</body> 
</html>

我的问题是：有没有更好的方法来做到这一点？

来源

2010-03-12 David V.

在大多数情况下，我用一个布尔值，而不是一个计数器（这样的动作在第一动画结束时进行），但除此之外，它是相同的方法。好问题，我很好奇其他方式。 – 2010-03-12 11:25:04

确实。例如，如果所有动画的长度不相同（不像我简单化的示例中），并且只有在事物停止移动或在浏览器上淡化之后才想做某事，那么您希望等待所有这些动画。 – 2010-03-12 11:32:56

您可以运行所有这些相同的回调，但前提是没有，目前正在了动画执行if条款，如：

$(".myclass").fadeOut("slow", function() { 
    if ($(".myclass:animated").length === 0) 
     $("#target").append("<p>All done.</p>"); 
    });

如有仍在通过动画这种只检查:animated selector。如果你是动画很多不同的东西，然后用同样的概念，只是添加到选择这样的：

$(".myclass:animated, .myClass2:animated")

如果你在很多地方使用它，我会作出这样的回调onFinish功能或者把它整理一下。

来源

2010-03-12 12:18:04

不错，我喜欢这个方面的敏感方面。 – 2010-03-12 12:40:17

我也喜欢这个，+1 – 2010-03-12 13:41:52

也遇到这个问题。聪明的解决方案。 – 2010-03-13 02:44:53

在我来说，我必须定义

if ($(".myclass:animated").length === 1)

来源

2010-08-04 12:42:46

看这个主题的讨论：jQuery $.animate() multiple elements but only fire callback once

的.when()/.then()和.promise().done(callback());功能提供了一个更优雅的解决方案调用一个问题calllback在所有动画结束时。

来源

2012-02-19 18:04:38 Scrat

+12

这应该是正确的答案。 – 2012-04-20 10:34:47

良好的通话。类似地，这使用队列的最后一个元素完成aniamting火后的回调： elements.fadeOut（330）。去年（）队列（函数（）{}）; – Tyler 2012-05-16 20:01:04

jQuery的，多个动画后调用回调函数只有一次

回答

相关问题