多元素jQuery動畫問題

Question

我試圖遍歷動畫，選擇多個元素並移動它們，只要鼠標懸停在父區域上即可。 這足夠好，但是每次動畫循環遍歷第一個元素（子元素）時，移動速度都比其他元素快。 ??? JSFiddle示例

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動畫，然后停止並啟動所有動畫，盡管其中一些動畫尚未完成。

考慮以下示例（ 小提琴 ）：

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的文檔。

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集合中一個元素的動畫完成，則將調用完整的處理程序。 因此，當第一個元素完成時，您將調用loop並停止其他元素的動畫。 更好地使用promise and 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/ ）