jquery - jQuery 多个动画并跟踪它们的进度

Question

我正在编写一个脚本，其中包含许多并行且以不同顺序发生的动画。根据在网页上单击的内容使用一组特定的动画。这些功能被重用，并且每次都不会以相同的顺序出现。

当用户单击另一个元素而不让第一组动画完成时，就会出现问题。在这种类型的实例中，脚本会中断并且无法按预期运行。这显然是因为进度没有完成，又开始执行另一组动画。

我的问题是，是否有任何做法可以识别当前是否正在运行动画，以防止在当前集完成之前执行另一组动画。

Answer 1

您可以使用:animated选择器：

if ($("yourSelector:animated").length > 0) {
    // Some of the elements matching 'yourSelector' are still being animated.
}

或者，您可以在开始新动画之前调用finish()以强制当前动画立即完成：

$("yourElement").finish().animate({
    // The properties to animate...
});

Answer 2

如果您只想确保与特定元素关联的动画在开始新动画之前正常完成，您可以使用该.queue()功能。请参阅我在 jsFiddle 上的示例。

$( function() {
    $(".clicker").on("click", function() {
        var self = $(this);
        self.queue( function(next) {
            self.animate({left:"+=100"}, 1000); // Replace with your animation
            next();
        });
    });
});

在 api.jquery.com 上阅读有关队列功能的更多信息。

Answer 3

jQuery 还有一个隐藏的暴露变量$.timers，它包含当前动画/等所有事物的数组。哪个速度方面非常快，性能方面你不想循环$('*').is(':animated')，以测试页面上是否有任何东西在移动。

我创建了一个小函数，它一遍又一遍地循环一个间隔，直到它们全部完成，然后执行一个回调函数。

function isPageAnimated (_func) {    
    var testAnimationInterval = setInterval(function () {
        if ($.timers.length === 0) { // any page animations finished
            clearInterval(testAnimationInterval);
            _func(); // callback function
        }
    }, 100);
}