检测页面上是否有动画

Question

我知道:animated 选择器，但目前我遇到了（可能是少数几个）旧 IE 的性能问题（看图）。我觉得这可能是我正在测试 ANY 页面动画的方式。

目前我正在循环一个区间，核心测试是 $('*').is(':animated')。这 $('*') 是我担心的......但由于我不知道在我的插件下面动画的 divs / etc 是什么，我不知道还有什么去做吧！

var testAnimationInterval = setInterval(function () {

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

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

function animationsFinished() {
    // do whatever
}

有没有人找到更好/不同的方法？尤其是在性能方面？

Answer 1

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

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

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);
}

这是，假设您当然可以访问开始/捕捉动画结尾的代码。