Question

我有下拉菜单，我想在mouseout上添加延迟。因此，当您将鼠标悬停在菜单上时，它会显示下拉菜单，但是当您从菜单中移动鼠标时，我希望有一些延迟。

我整天都在搜索这个，并没有找到任何东西，期待我不知道使用的hoverIntent插件。

这是我的代码：

HTML：

<ul id='nav'>
  <li><a href='#'>Top level 1</a></li>
  <li><a href='#'>Top level 2</a>
    <ul>
      <li><a href='#'>Sub 2 - 1</a></li>
      <li>
        <a href='#'>Sub 2 - 2</a>
        <ul>
          <li>
            <a href='#'>Sub 2 - 2 - 1</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
            </ul>
          </li>
          <li><a href='#'>Sub 2 - 2 - 2</a></li>
          <li>
            <a href='#'>Sub 2 - 2 - 3</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Sub 2 - 3</a></li>
    </ul>
  </li>
</ul>

Jquery的：

$(document).ready(function(){                   
    $("#nav ul ").css({display: "none"}); 
    $("#nav li").hover(
        function()
            {
                $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();
            },
        function(){
          $(this).find('ul:first').css({visibility: "hidden"});
        }
);

请假设，我是javascript的大菜鸟：）

谢谢！

修改

我已经尝试了所有的解决方案，没有人能够期待Patricia的解决方案。现在，我在http://pastehtml.com/view/aykmhy9ae.html

看到了奇怪的行为

Answer 1

这会增加5秒（5000毫秒）的延迟......

$(this).find('ul:first').delay(5000).css({visibility: "hidden"});

编辑：

Read more here.

Answer 2

我可以建议逐渐淡出比延迟更好。在这种情况下，请尝试以下操作，而不是visibility: "hidden"代码

$(this).find('ul:first').fadeOut('slow');

小提示：当您使用jQuery显示/隐藏元素时，您只需使用以下内容：

hide(), show(), toggle()
fadeIn(), fadeOut(), fadeToggle()
slideIn(), slideOut(), slideToggle()

设置display和visibility CSS属性是徒劳的。

Answer 3

你想要这样的东西：

        $("#nav li").hoverIntent({
            over: function(e){
               $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();

            },
            out:function(e){
                $(this).find('ul:first').css({visibility: "hidden"});

            },
            timeout: 1000
        });

其中1000是您希望延迟执行mouseout操作的毫秒数

Answer 4

您只需要使用settimeout来延迟触发功能，并确保如果它们悬停，则清除超时。这将超时1000毫秒。

$(document).ready(function(){                   
    $("#nav ul ").css({display: "none"}); 
    var onHoverTimeoutFunction = null;
    $("#nav li").hover(
        function()
            {
                onHoverTimeoutFunction = setTimeout(function() {$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();},1000);
            },
        function(){
          clearTimeout(onHoverTimeoutFunction);
          $(this).find('ul:first').css({visibility: "hidden"});
        }
);

Answer 5

 $(function () {
        var timer = null;
        $("li", "#nav").hover(
            function () {
                var element = $(this);
                timer = window.setTimeout(function () { element.find("ul:first").slideToggle(); }, 500);
            },
            function () { window.clearTimeout(timer); $(this).find('ul:first').slideToggle(); }
        );

            $("ul", "#nav").css("display", "none");
    });

如何设置此菜单的鼠标悬停延迟？

5 个答案: