Question

当你将鼠标悬停在#menu上时，它会淡入＃menu-big。当用户将鼠标移离＃menu-big时，我想添加延迟。

到目前为止，我的工作很有趣（第一次工作正常，然后表现不正常）：http://jsbin.com/upopap/1

有什么想法吗？

的jQuery

$(document).ready(function() {

  $('#menu').hover(
    // mouseover
    function(){
      $('#menu-big').fadeIn('fast');
    },
    // mouseout
    function(){
      setTimeout( function(){
        $('#menu-big').fadeOut('fast')
        }, 1000 );
    }
  );


});

HTML

  <div id="menu">
    <div id="menu-big">
      <ul>
        <li><a href=""><span>Meet our Staff</span></a></li>
        <li><a href=""><span>Services</span></a></li>
        <li><a href=""><span>Associations</span></a></li>
      </ul>
    </div>
  </div>

Answer 1

花了几次尝试，但我可以在Firefox中重新创建你的问题我认为这可能更接近您的期望：

Basic Working Example

$(document).ready(function () {
    $('#menu').mouseenter(function () {
        $('#menu-big').fadeIn(400);
    });
    $('#menu').mouseleave(function () {
        $('#menu-big').delay(800).fadeOut(400);
    });
});

API documentaion for .delay()

基本版本将涵盖您所要求的内容，但您可能希望使用高级版本，因为它在触发悬停事件之前有延迟，这将解决将鼠标移入和移出{{1}的问题很快。

Advanced Working Example

#menu-big

此方法是This Answer的改编版，如果它适用于您，您可能也希望通过对其进行投票。

如何以较小的延迟淡化菜单？

1 个答案: