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>

我的问题是:有更好的方法吗?

解决方法

你可以为所有的运行相同的回调,但只有执行if子句,如果目前没有动画,像这样:
$(".myclass").fadeOut("slow",function() {
    if ($(".myclass:animated").length === 0)
      $("#target").append("<p>All done.</p>");
  });

这只是检查是否仍有动画通过:animated selector
如果你动画了很多不同的东西,然后使用相同的概念,只需像这样添加到选择器:

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

如果你在很多地方使用它,我会让回调一个onFinish函数或者整理它。

原文链接:https://www.f2er.com/jquery/184027.html

猜你在找的jQuery相关文章