Question

我尝试在2秒后显示<div>时出现问题。我的问题是当我悬停按钮时，菜单显示没有延迟，我想要延迟2秒...

尝试悬停：仅仅是幻灯片，然后菜单会显示 - ＆gt;你可以看到它here

代码：

<script>$(document).ready(function() { 
    $("#dropdown").hover(function(){
        $(".drop-inner").delay(2000).show();
      });
    });</script>

Answer 1

您可以使用javascripts setTimeout函数来延迟执行：

<script>
  $(document).ready(function() { 
    $("#dropdown").hover(function() {

       setTimeout(function() {
          $(".drop-inner").show()
       }, 2000);

     });
  });
</script>

Answer 2

使用超时而不是.delay()，后者只有affects queued functions（例如效果）：

$("#dropdown").hover(function() {
    setTimeout(function() {
        $(".drop-inner").show();
    }, 2000);
});

Answer 3

似乎.show()不适用于.delay()：

在版本1.4中添加到jQuery，.delay（）方法允许我们延迟队列中跟随它的函数的执行。它可以与标准效果队列一起使用，也可以与自定义队列一起使用。只有队列中的后续事件才会延迟;例如，这不会延迟不使用效果队列的.show（）或.hide（）的无参数形式。

Answer 4

我同意setTimeout解决方案，但是......如果用户在2秒钟之前将鼠标光标从#dropdown移开了怎么办？

<script>
    $(document).ready(function() { 
        $("#dropdown").hover(function(){
            $.data(this, "timer", setTimeout($.proxy(function() {
                $(".drop-inner").show();
            }, this), 2000));
        },
        function() {
            clearTimeout($.data(this, "timer"));
            $(".drop-inner").hide();
        });
    });
</script>

检查http://jsfiddle.net/vundicind/Lqq3h1xa/1/上的示例。

Answer 5

使用setTimeout(expression, delay);

$("#dropdown").hover(function(){
    setTimeout(doSomething(), 2000);
  });
});

然后在一个单独的函数中

<script>
    function doSomething() {
        $(".drop-inner").show();
    }
</script>

Answer 6

如jQuery文档中所述：

.delay()方法最适合在排队的jQuery之间延迟效果。因为它是有限的 - 它例如，没有提供一种方法取消延迟。 .delay()不是替换JavaScript的原生 setTimeout函数，可能更多适用于某些用例。

如果您使用fadeIn或其他一些jQuery效果，您的代码可以在效果之间起作用。

您想要做的事情就像http://jsfiddle.net/BQhwd/

我猜你也想在2秒后想要一个hide()。

Answer 7

尝试此功能Animate

<script>$(document).ready(function() { 
    $("#dropdown").hover(function(){
        $(".drop-inner").animate({},2000,function(){
         //animation complete
});

      });
    });</script>

2秒后显示菜单

7 个答案: