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（）