延遲slideDown（）/ slideUp（） - jquery dropdown

Question

我正在創建一個下拉菜單，我想要延遲大約250毫秒，以便在有人快速滾動按鈕時不會觸發它。

這是我目前的代碼。我嘗試使用delay（）方法，但它不太好。

$(".deltaDrop").hover(function(){ 
    $('.deltaDrop ul').stop(false,true).slideDown(250); 
    $('.delta').css('background-position','-61px -70px'); 
},function(){ 
    $('.deltaDrop ul').stop(false,true).slideUp(450); 
    $('.delta').css('background-position','-61px 0'); 
}); 

感謝

Answer 1

var timer; 
timer =  setTimeout(function() { 
        -- Your code goes here! 
       }, 250); 

然後你可以使用clearTimeout（）函數這樣。

clearTimeout(timer); 

Answer 2

setTimeout(function() { 
    $('.deltaDrop ul').slideDown() 
    }, 5000); 

Answer 3

未經檢驗的，unrefactored：

$(".deltaDrop") 
    .hover(
    function() 
    { 
     var timeout = $(this).data('deltadrop-timeout'); 

     if(!timeout) 
     { 
     timeout = 
      setTimeout(
      function() 
      { 
       $('.deltaDrop ul').stop(false,true).slideDown(250); 
       $('.delta').css('background-position','-61px -70px'); 
       $('.deltaDrop').data('deltadrop-timeout', false); 
      }, 
      250 
     ); 
     $(this).data('deltadrop-timeout', timeout); 
     } 
    }, 
    function() 
    { 
     var timeout = $(this).data('deltadrop-timeout'); 
     if(!!timeout) 
     { 
     clearTimeout(timeout); 
     $('.deltaDrop').data('deltadrop-timeout', false); 
     } 
     else 
     { 
     $('.deltaDrop ul').stop(false,true).slideUp(450); 
     $('.delta').css('background-position','-61px 0'); 
     } 
    } 
); 

Answer 4

這應該工作。

$(".deltaDrop").hover(function(){ 
    $('.deltaDrop ul').stop(false,true).hide(1).delay(250).slideDown(); 
    $('.delta').css('background-position','-61px -70px'); 
},function(){ 
    $('.deltaDrop ul').stop(false,true).show(1).delay(450).slideUp(); 
    $('.delta').css('background-position','-61px 0'); 
}); 

.delay只適用於處理動畫隊列時。不帶參數的.hide()和.show()不與動畫隊列交互。在.delay()之前添加.hide(1)和.show(1)使幻燈片動畫在隊列中等待。