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()函数。See my example on jsFiddle。

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

Read more about the queue function on 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);
}