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