jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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函数或者整理它。

大佬总结

以上是大佬教程为你收集整理的jQuery,在多个动画后只调用一次回调全部内容,希望文章能够帮你解决jQuery,在多个动画后只调用一次回调所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。