Mousemove事件即使在鼠標移動停止後也會導致無限循環

-3

以下是有問題的頁面：http://yac-web.com/clients/dessert/我試圖設置鼠標移動時發生的效應，並在不移動鼠標時停止。出於某種原因，事件開始正常，但只是保持循環。我對JS並不是很熟悉，並且在mousemove事件中找不到更多信息。由於Mousemove事件即使在鼠標移動停止後也會導致無限循環

$('html').mousemove(function() { 
    $('html').toggleClass("change", 1000, "easeOutSine"); 
})

然後

html { 
    background: rgba(191, 54, 245, 1); 
} 
.change { 
    background: rgba(61, 98, 245, 1); 
}

演示：Fiddle

來源

2013-11-15 A BOY n HIS PIG

請在問題中發佈您的代碼。 –

問題是動畫的排隊性質 –

的基本問題是，當鼠標移動你排隊了很多撥動類，其中後鼠標採用了排隊系統，甚至停止動畫將繼續運行。

是不是要增加更多的切換，如果有正在進行的動畫解決方案，嘗試

var flag = false; 
$('html').mousemove(function() { 
    if (flag) { 
     return; 
    } 
    flag = true; 
    $('html').toggleClass("change1", 1000, "easeOutSine", function() { 
     flag = false; 
    }); 
})

演示：Fiddle

另一種是使用:animated選擇

var $html = $('html').mousemove(function() { 
    if ($html.is(':animated')) { 
     return; 
    } 
    $('html').toggleClass("change1", 1000, "easeOutSine"); 
})

演示： Fiddle

來源

2013-11-15 15:08:44

感謝這非常有幫助，現在有沒有辦法做到這一點，當鼠標停止移動而不是完成當前隊列中的轉換時，轉換實際上會暫停或停止？ –

實際上在這兩個演示中，效果都在持續循環。也許toggleClass不是最好的方法來做到這一點？或者是鼠標移動的方式引起的問題？ –

Arun P Johny的答案在實際解決問題方面可能是最好的，但它並沒有深入研究它究竟發生了什麼。

這就是爲什麼這個問題正在發生的事情：

每次鼠標位置更新（幾次第二，除非你有嚴重滯後;我將承擔更新之間的第二的1/16），它增加了一個新的動畫到它需要做的動畫列表的末尾。然後，當你停止移動你的鼠標時，它仍然有一些留在隊列中的動畫，每個動作需要整整一秒。它將每1/16秒的動畫時間添加一秒，以便移動鼠標。因此，如果您將其移動一秒鐘，則會在開始動畫後停止16秒。

這可以通過確保在舊的動畫完成之前不添加新的動畫來解決。

來源

2013-11-15 15:20:43 AJMansfield

Mousemove事件即使在鼠標移動停止後也會導致無限循環

回答

相關問題