多元素jQuery动画问题

Question

我正在尝试循环选择多个元素并在鼠标悬停在父区域上时移动它们。这工作得很好，但是每次动画循环通过第一个元素（子元素）时，它的移动速度都比其他元素快。 ？？？ JSFiddle Example

HTML：

<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>

jQuery:

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

function stop() {
    $(".mainButton").stop();
}

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

Answer 1

来自文档：

完成

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

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

考虑这个例子 (Fiddle)：

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

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

您可以使用 Promise 使其工作 (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/)