.delay（）不能與sli​​deUp（）一起工作

Question

正如標題所說，由於某種原因，箱子在滑回之前不會延遲。 現在，如果將鼠標懸停在「.boxset」類的名爲「#box」的div上，則會顯示div「#slidebox」。 #slidebox也具有「.boxset」類。如果將鼠標從這兩個div移開，#slidebox將滑動。在這方面它工作得很好。

我希望有一個延遲，然後再次滑動備份，但由於某種原因delay（）不起作用。

代碼的臨界線是兩個函數下懸停第二（）

即：

$('#slidebox').stop().delay(600).slideUp({ 

任何人都可以看到什麼錯？

非常感謝任何幫助！

jQuery的

$('#slidebox').hide(); 
$('.boxset').hover(
      function() { 
    $('#slidebox').stop().slideDown(
     { 
     duration:600, 
     easing: "swing", 
     queue: false, 
     complete: function() { 
     $('#slidebox').removeAttr('style');} //End complete 
     } //End object literals 
     ); // End slideDown 
        } // End first function 
    , 
    function() { 
     $('#slidebox').stop().delay(600).slideUp({ 
     duration:600, 
     easing: "swing", 
     queue: false, 
     } // End object literals 
        ); //End slideUp 
        } // End second function 

); // End Hover 

的HTML

<div id="box" class="boxset"></div> 
<div id="slidebox" class="boxset"></div> 

的CSS

#box { 
    width: 100%; 
    height: 35px; 
    background-color: orange; 
    drop-shadow: 2px 2px 1px rgba(0,0,0,.25); 
    border-radius: 10px 0px 10px 0px; 
    color: white; 
    diplay:block; 
    text-align: right; 

} 

#slidebox { 
    width:100%; 
    height: 100px; 
    background-color: rgba(23,34,1, .1); 
    border-radius: 10px 10px 0px 10px; 
    display: block;} 

Answer 1

我認爲在這種情況下，你要使用的setTimeout。

var timeOut; 
$('.boxset').hover(
    function() { 
     clearTimeout(timeOut); 
     $('#slidebox').stop().slideDown({ 
      duration:600, 
      easing: "swing", 
      queue: false, 
      complete: function() { 
       $('#slidebox').removeAttr('style');} //End complete 
     }); 
    }, 
    function() { 
     $('#slidebox').stop(); 
     timeOut=setTimeout(function(){ 
      $('#slidebox').slideUp({ 
       duration:600, 
       easing: "swing", 
       queue: false, 
      }); 
     }, 600); 
    } 

http://jsfiddle.net/HDLCE/1/

Answer 2

從jQuery文檔：

queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.

嘗試設置隊列：在懸停真正爲您handlerOut功能

更改div元素的嵌套和刪除來自內部div的「boxset」類，以便您的事件處理程序不會多次觸發。這應該解決不一致的行爲。

<div id="box" class="boxset"> 
<div id="slidebox"></div> 
​</div>​