Dav*_* V. 26 jquery jquery-animate
假设我有几个动画同时运行,并且我想在完成所有这些动作后调用它.
只有一个动画,很容易; 有一个回调.例如 :
$(".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>
我的问题是:有更好的方法吗？
Scr*_*rat 46
看一下这个线程的讨论:jQuery $ .animate()多个元素但只有一次fire callback
这些.when()/.then()和.promise().done(callback());函数为在所有动画结束时调用单个calllback的问题提供了更优雅的解决方案.
Nic*_*ver 29
您可以为所有这些回调运行相同的回调,但只有if当前没有动画再次执行时才执行该子句,如下所示:
$(".myclass").fadeOut("slow", function() {
if ($(".myclass:animated").length === 0)
$("#target").append("<p>All done.</p>");
});
这只是检查是否仍然通过:animated选择器动画.如果你动画了许多不同的东西然后使用相同的概念,只需添加到选择器,如下所示:
$(".myclass:animated, .myClass2:animated")
如果你在很多地方使用它,我会把这个回调作为一个onFinish功能或其他东西来整理它.