jquery - jQuery 在多个元素上进行动画处理，哪个更好？

Question

我在插件上使用 jQuerys animate 函数，在许多元素上模拟，每个元素具有不同的持续时间。我想知道是否有任何动画正在运行或根本没有动画。所以我想出了这个：

if( $div1.is(':animated') || $div2.is(':animated') || $div3.is(':animated') ) return true;
else return false;

或这个：

if( $div1.add($div2).add($div3).is(':animated') ) return true;
else return false;

哪个更好？？？

你知道还有什么方法吗？？？

我不想要这段代码$("*").is(':animated');，因为它会检查所有动画和其他插件动画。

请记住，我有很多元素，而不仅仅是 3 个。

谢谢阅读...

Answer 1

我会选择第二个，因为它的阅读和思考代码更少。

一般来说，DRY更好。

你也可以重构...

return $div1.add($div2).add($div3).is(':animated');

Answer 2

也许您可以在要检查动画的 div 上放置一个类？

if ($(".myclass").is(":animated")) return true;

Answer 3

我可能会保持明确，以节省周期。每次制作动画时，递增numberOfTotalAnimations. 在动画回调结束时，将其递减。那就是如果你真的需要这里的速度。否则，我喜欢@Ben 的班级提案。

通过请求更新示例：

var numberOfTotalAnimations = 0;

numberOfTotalAnimations++;
$('#thing').animate({
    opacity: 0.1
  }, 2000, function() {
    numberOfTotalAnimations--;
  });

if (!numberOfTotalAnimations) {
  console.log("Everything's quiet.");
} else {
  console.log("Something's moving.");
}

它不漂亮，容易出错（因为你可能忘记增加或减少计数器） - 但它很快。