让我们说,我有几个动画一次运行,我想调用一个函数,一旦所有的完成。
只有一个动画,很容易;有一个回调。例如 :
$(".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>
我的问题是:有更好的方法吗?
解决方法
你可以为所有的运行相同的回调,但只有执行if子句,如果目前没有动画,像这样:
$(".myclass").fadeOut("slow",function() { if ($(".myclass:animated").length === 0) $("#target").append("<p>All done.</p>"); });
这只是检查是否仍有动画通过:animated
selector。
如果你动画了很多不同的东西,然后使用相同的概念,只需像这样添加到选择器:
$(".myclass:animated,.myClass2:animated")
如果你在很多地方使用它,我会让回调一个onFinish函数或者整理它。