如何防止快速移動鼠標上的多個事件？

當鼠標打開時，鼠標離開元素時，我使用此代碼在兩個圖像之間淡入淡出。這會在鼠標移動太快時造成一些不正確的轉換。如何防止呢？如何防止快速移動鼠標上的多個事件？

我的代碼：

$('.prods li').live('mouseenter',function() { 
    $(this).children('.label').stop().animate({top: '80%',opacity: 1}, 800, 'easeOutQuint'); 
    if ($(this).children('.producthover').length) { 
     $(this).children('.product').fadeOut(800); 
     $(this).children('.producthover').fadeIn(800); 
    } 
}).live('mouseleave',function() { 
    $(this).children('.label').stop().animate({top: '50%',opacity: 0}, 800, 'easeOutQuint'); 
    if ($(this).children('.producthover').length) { 
     $(this).children('.product').fadeIn(800); 
     $(this).children('.producthover').fadeOut(800); 
    } 
});

來源

2012-09-02 Ahmed Fouad

您是否嘗試將'.stop（）'改爲'.stop（true，true）'？ – j08691

工作:)請張貼它作爲答案 –

您是否試過將.stop()更改爲.stop(true,true)？

來源

2012-09-02 19:28:49 j08691

您可以通過查詢意圖。

基本上，您需要延遲動畫的執行，以確保在最短時間內未發生其他操作。

var mouseEnterTimer = null; 

$('.prods').on('mouseenter', 'li', function(){ 

    /*clear timer since another mouseenter has occured within 200 ms */ 
    clearTimeout(mouseEnterTimer); 


    /*now queue up another one to execute 200 ms later*/ 
    mouseEnterTimer = setTimeout)function(){ 
     //all your animation logic here 

    }, 200); 
});

這保證了事件被觸發只有一次即使鼠標進出有關地區的迅速移動。

你可能想進一步瞭解debouncing events閱讀。（以及它們是怎樣的different from throttling）

此外，已經有一個很好的hoverIntent plugin（等等）。

來源

2012-09-02 19:19:44

如何防止快速移動鼠標上的多個事件？

回答

相關問題