Question

我试图在动画中循环选择多个元素并移动它们，只要鼠标悬停在父区域上。这种方法效果很好，但每次动画循环通过第一个元素（子）时移动得比其他元素快。 ??? JSFiddle Example

HTML：

WEB-INF/classes/com/example/FooServlet.class

jQuery的：

<div id="menuContent">
    <button id="btn1" class="mainButton" left="0"/>
    <button id="btn2" class="mainButton" left="0"/>
    <button id="btn3" class="mainButton" left="0"/>
</div>

Answer 1

来自文档：

<强>完整

动画完成后调用的函数，每个匹配元素调用一次。

当您致电animate时，它会启动3个动画。第一个元素的动画首先开始并完成。然后调用它complete并停止并启动所有动画，但其中一些还没有完成。

考虑这个例子（Fiddle）：

function loop() {
  $('.mainButton').stop().animate({
    left: '+=1'
  }, 1, 'linear', function() {
    loop();
  });
}

只有一个圆圈会移动，因为其他人没有时间间隔移动。

您可以使用promises使其有效（Fiddle）：

$('#menuContent').hover(function() {
  $('.mainButton').data('run', true);
  loop();
}, function() {
  $('.mainButton').data('run', false);
});

function loop() {
  if (!$('.mainButton').data('run')) return;
  $('.mainButton').animate({left: '+=10'}, 100, 'linear').promise().done(loop);
}

Answer 2

Danil Speransky是正确的。但是，animate函数有一个options参数，允许动画不在严格的队列中运行。

`$(".mainButton").animate({ left: "+=20"},{queue: false}, 100, 'linear', function () { loop();});`

查看queue：false here的文档。

Answer 3

你的里程可能会有所不同，但做这两件事似乎有很大的帮助：

首先，存储.mainButton元素的jQuery对象：

var $mainButton = $('.mainButton')

其次，增加left增量并增加延迟：

$mainButton.stop().animate(
  { left: "+=1000"},
  5000,
  'linear', 
  function() { loop() })

你可以用更多的数字来玩，看看你是否能获得更好的表现。

https://jsfiddle.net/wotfLyuo/8/

Answer 4

如果jquery集合中一个元素的动画完成，则调用完整的处理程序。因此，当第一个元素完成时，您调用循环并停止其他元素的动画。更好地使用promise和done并在集合中保存动画的状态：

$("#menuContent").hover(function () {
    start();
}, function () {
    stop();
});

function start() {
    $(".mainButton").data('stopped', false);
    loop();
}

function stop() {
    $(".mainButton").data('stopped', true).stop();
}

function loop() {
    var $mainButtons = $(".mainButton").stop();
    if(!$mainButtons.data('stopped'))
        $mainButtons.animate({ left: "+=20"}, 100, 'linear').promise().done(loop);
}

这是一个工作小提琴（https://jsfiddle.net/wotfLyuo/5/）

多元素jQuery动画问题

4 个答案: