jQuery滑塊問題

Question

我正在嘗試做一些我不知道該怎麼做的事，但我知道可以做到。有2個div，它們都擴展瀏覽器窗口的全部寬度，它們都是450px的高度。所以基本上1塊在另一塊之上。我想在這兩者之間放置一個div，它從懸停在頂部Div（按鈕或其他）上的東西中顯示出來。懸停項目將位於頂部div的底部。

但我需要中間div保持活躍，同時它的內容被徘徊......結束。

jquery會是什麼樣子？這是我迄今爲止所擁有的。

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#toggleh1").hover(function() { 
       $(".header2").slideDown(400); 

      }, function() { 
       $(".header2").slideUp(400); 
      }); 
     }); 
    </script> 

感謝

Answer 1

你最好的選擇可能是使用超時，而不是.hover（）

$(document).ready(function() { 
    var t; // This will be a timeout 
    $('#toggleh1').mouseover(function() { 
     if (t) 
     { 
      clearTimeout(t); 
     } 

     $('.header2').slideDown(400); 
    }).mouseout(function() { 
     t = setTimeout(function() { 
      $('.header2').slideUp(400); 
     }, 500); // .5 second delay before hiding 
    }); 

    $('.header2').mouseover(function() { 
     if (t) 
     { 
      clearTimeout(t); 
     } 
    }).mouseout(function() { 
     t = setTimeout(function() { 
      $('.header2').slideUp(400); 
     }, 500); // .5 second delay before hiding 
    }); 
}); 

爲了進一步解釋，當你將鼠標放置在觸發要素，在div顯示。當鼠標離開觸發元件時，瀏覽器開始倒計時.5秒。如果達到倒計時結束，div將被隱藏。如果在倒計時結束之前，您將鼠標懸停在觸發器或div上，倒數將停止。如果您的鼠標離開div，倒計時將再次開始。

請注意，你可能想玩弄.mouseover（）與.mouseenter（），和.mouseout（）與.mouseleave（）