检测页面上是否有任何动画

Question

我知道:animated选择器，但目前我遇到了一些与旧版IE性能有关的问题（难以置信）。我觉得这可能与我测试任何页面动画的方式有关。

目前，我正在通过循环间隔来测试$('*').is(':animated')。我担心的是$('*')，但由于我不知道我的插件下面正在被动画化的div或其他元素是什么，所以我不知道该怎么做！

var testAnimationInterval = setInterval(function () {

    if ( ! $('*').is(':animated') ) {  // all done animating
        clearInterval(testAnimationInterval);

        animationsFinished();  // callback function
    }
}, 300);

function animationsFinished() {
    // do whatever
}

有人发现了更好/不同的做法吗？特别是在性能方面？

- Mark Pieszak - Trilon.io

---

我可能可以获取一般的div区域，那么它仍然能够检测到其中发生的任何/所有动画吗？ - Mark Pieszak - Trilon.io

每300毫秒执行$("*")会对任何浏览器的性能造成很大的影响。如果你负责设置动画效果，请自行跟踪它们。 - cloakedninjas

如果你想避免使用未记录的方法，那么$(":animated").length可能会稍微好一些，但是未记录的方法比使用:animated选择器要快得多，因为你只是在一个数组上检查长度属性。http://jsperf.com/animated-jquery 我怀疑这个未记录的数组不会很快消失。 - Kevin B

@mcpDESIGNS：你能发一下jsperf的链接吗？我很好奇它们之间的区别是什么。 - Cerbrus

@Cerbrus http://www.jsperf.com/animated-jquery - 所有三种方式，一决高下。 - Mark Pieszak - Trilon.io

Answer 1

所有jQuery动画计时器都存储在数组$.timers中。一种选择是仅检查$.timers属性的长度是否大于零：

if ($.timers.length > 0) {
    // something is animating
}

- VisioN

---

这不是 jQuery 的文档属性。你可以在源代码中找到它：https://github.com/jquery/jquery/blob/master/src/effects.js#L715。 - VisioN

啊，所以你就是我被无情地踩的原因啊。避免手动实现jQuery已经有的功能，对吧？ :P （免责声明：上述陈述是一个玩笑。你在jQuery源代码中找到了这个功能真不错） - Cerbrus

@Cerbrus 我想 jQuery 一定有类似的东西，否则 :animated 选择器怎么能工作呢 :) 顺便说一句，愚蠢的 dvotes 是 SO 的一个真正问题。 - VisioN

@VisioN 该死的VisioN...又一次准确无误 :) 正如-KevinB指出的(http://jsperf.com/animated-jquery)，与其他方法相比，这个简直**疯狂**快速！之前不知道jQuery内部还有这个隐藏的宝藏。再次感谢兄弟。 - Mark Pieszak - Trilon.io

+1 很好的发现。不过，有趣的是，这个属性是未记录的。 - inhan

Answer 2

我认为在动画开始时将元素推入数组，动画完成后从数组中删除元素会更有效率。或者更好的方法是，在动画开始时增加一个变量，当动画完成时将其减少1。如果变量为0，则当前没有任何动画正在运行。

因此，以下是一些伪代码：

var animatingElements = 0;

function animationStart(){ // Add this function in your animation start events;
    animatingElements++;
}

function animationEnd(){ // Add this function  in your animation end events;
    animatingElements--;
}

if (animatingElements === 0) {
    clearInterval(testAnimationInterval);
}

这是假设你当然有访问启动/捕获你的动画结束代码的权限。

- Cerbrus

---

这个如何通过外部库捕获动画？ - Ian

你正在告诉那个库开始动画，_在某处_。 调用 animationStart() 函数。 - Cerbrus

是的，并不总是如此。一个简单快速的例子是jQuery UI的“自动完成”。我没有看到任何支持当结果被显示/隐藏时该怎么做的内容。虽然结果只是简单地显示/隐藏（不完全是动画），但在某些情况下它们可能会淡入/淡出。无论哪种方式，都没有支持，也不是所有库都支持。假设您直接触发动画或具有在其之前和之后执行某些操作的支持，这还不够。 - Ian

@Cerbrus 我喜欢这个想法，但不幸的是我无法对底层页面进行任何编辑！但下次或者当我可以更新它时，我毫不怀疑会开始将它们存储在一个数组中。（至少作为参考）+1 - Mark Pieszak - Trilon.io

@mcpDESIGNS：谢谢 ^_^ 我很高兴能够提供帮助，尽管 jQuery 有计时器数组 :P - Cerbrus