函數jquery上的延遲

我在菜單上有jquery的懸停效果，它可以正常工作，但如果將鼠標移動到項上的速度提高了幾倍，那麼動畫會繼續執行多次，然後進入該區域，對不起如果我不能按照我的意願解釋我的問題，我需要的是某種延遲，所以如果您將鼠標移動很多次，該功能只會觸發一次，然後您等待1秒以再次獲得效果。謝謝！函數jquery上的延遲

$(".border").hover(function(){ 
    if($(this).next('.sous_menu').is(':visible')){ 
     $('.sous_menu').closest('.border').removeClass('border').addClass('border_active'); 
    }else{ 
     $(this).toggleClass('border_active border', 500); 
    } 
});

http://jsfiddle.net/xb8Ss/9/

來源

2013-04-23 novoa

你可以檢查該元素是否是動畫：http://stackoverflow.com/questions/724911/how-do-i-find-out-with-jquery-if-an-element-is-being-animated – Adder 2013-04-23 14:30:56

可能應該使用'.stop（）'函數在重新激活之前停止動畫。 – 2013-04-23 14:31:07

嘗試添加delay()和切換之前停止（）。 stop()將停止任何正在進行的動畫，以防止無限動畫。而delay()會延遲它放置多少毫秒。

$(this).stop()delay(1000).toggleClass('border_active border', 500);

來源

2013-04-23 14:38:14 KevinIsNowOnline

太棒了！謝謝大家！！！ – novoa 2013-04-23 15:01:51

你可以看看這個插件：hoverIntent jQuery Plug-in在這個問題描述Delay jquery hover event?

來源

2013-04-23 14:31:20 forumma

如果該功能已經被添加檢查VAR和chaning它超時執行的最後一秒您可以檢查：

// the first time should always be allowed 
var allow = true 

$(".border").hover(function(){ 

    // if 'allow' is false, return without doing anything 
    if(!allow) { 
     return; 
    } 

    // the function is now gonna execute, don't allow 
    // other events from executing the function 
    allow = false; 


    // executing the function 
    if($(this).next('.sous_menu').is(':visible')){ 
     $('.sous_menu').closest('.border').removeClass('border').addClass('border_active'); 
    }else{ 
     $(this).toggleClass('border_active border', 500); 
    } 


    // after a second of the execution of the function, set allow to 
    // true again to allow other events from executing the function 
    setTimeout(function() { 
     allow = true 
    }, 1000) 

});

來源

2013-04-23 14:45:29 rednaw

如果我正確地理解這個問題，我相信這是什麼你正在尋找...

$(document).ready(function() { 
    var canMove = true; 

    $("#moveme").hover(function() { 
     if(canMove) { 
      canMove = false; 

      $(this).css("left", "50px"); 
      setTimeout(function() { canMove = true; }, 1000); 
     } 
    }, function() { 
     $(this).css("left", "10px"); 
    }); 
});

的jsfiddle here

上面的懸停代碼只會在達到1000（1秒）的「冷卻時間」後運行。或者，您可以在懸停出口設置canMove爲true，這將確保代碼只在每次懸停時運行一次（儘管這應該已經是這種情況）。

來源

2013-04-23 15:12:13

函數jquery上的延遲

回答

相關問題