Question

我创建一个菜单，我通过悬停事件显示和隐藏jquery上的子菜单，如下面的代码

是什么方式，子菜单显示或隐藏在一些毫秒鼠标停留在它们之后？

$(" #nav li").hover(function(){
        $(this).find('ul:first').show(600);

        },function(){
        $(this).find('ul:first').fadeOut(400);
        });
}

Answer 1

您可能想要查看hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

在hover()的handlerIn函数中设置一个计时器。清除handlerOut中的计时器。

var timeoutId = { };

function show(id) {
    $("#"+id).find('ul:first').show(600);
    timeoutId[id]= null;
}

function init() {
      $("#nav > li").hover(
          function(){
              var id = $(this).attr('id');
              timeoutId[id]= setTimeout(function(){show(id);}, 800);
          },
          function(){
              var id = $(this).attr('id');
              if (typeof timeoutId[id] != "undefined" && timeoutId[id]!=null) {
                  clearTimeout(timeoutId[id]);
                  timeoutId[id]= null;
              }
              $(this).find('ul:first').fadeOut(400);
          }
      );
  }

  $(document).ready(init);

Answer 3

这是一个比Cheeso's更简洁的版本：

$(function() {
    $("#Trigger").hover(
        function() {
            $("#Target").delay(800).fadeIn(0);
        },
        function() {
            $("#Target").clearQueue().fadeOut(400);
        }
    );
});

delay会导致#Target不能淡入800毫秒。当您将鼠标悬停时（无论是#Target完全显示还是由于delay而等待显示），都会调用clearQueue。如果在800毫秒内发生，则delay和fadeIn将从队列中清除。否则队列将为空。在任何一种情况下，#Target都会立即淡出。

（请注意，您需要使用fadeIn(0)而不是show，因为show不是fx队列中的内容，delay因此无效。）

如果您还想延迟fadeOut，delay需要追踪clearQueue，而不是之前。

<强>更新

我注意到，如果您使用fadeIn(0)代替fadeIn(500)，但是在这500毫秒内徘徊，那么在随后的悬停时，#Target将只会淡入不透明度它以前被允许淡入。有人知道这是否是预期的行为？

如何在几毫秒后上升悬停事件？

3 个答案: