如何显示 div 10 秒然后隐藏它答案

【问题标题】：How to show div for 10 seconds and then hide it如何显示 div 10 秒然后隐藏它
【发布时间】：2011-05-06 20:46:36
【问题描述】：

我有一个 div 块，鼠标悬停在另一个 div 上。

div1 img // 鼠标悬停显示 div2。

我想显示 div2 10 秒然后隐藏它，你能告诉我如何实现这个

谢谢

【问题讨论】：

发布 HTML 示例以获得最佳答案。如果 div 是嵌套的，则可能存在事件顺序问题。
@silkster ，下次我一定会这样做。我得到了答案，非常感谢
jQuery show for 5 seconds then hide的可能重复

标签： jquery

【解决方案1】：

$("#div1").mouseenter(function() {
    var $div2 = $("#div2");
    if ($div2.is(":visible")) { return; }
    $div2.show();
    setTimeout(function() {
        $div2.hide();
    }, 10000);
});

另一种方法：

$("#div1").mouseenter(function() {
    var $div2 = $("#div2");
    if ($div2.data("active")) { return; }
    $div2.show().data("active", true);
    setTimeout(function() {
        $div2.hide().data("active", false);
    }, 10000);
});

【讨论】：

@sime 还有一件事，如果它是可见的，它应该在 10 秒后隐藏..我们不应该返回那里。如果它是可见的，我们必须在其上设置 setTimout 函数
@gov #div2 是否隐藏在开头？
@sime , div2 将隐藏页面的加载。
@gov 第一次悬停#div1时，#div2会被隐藏，函数不会返回。相反，将显示 #div2 并设置超时。现在，如果您再次悬停，并且 #div2 仍然可见（10 秒还没有过去），该函数将返回 - 因为我们不想再设置另一个超时。
+1 我认为这是防止设置多个超时的唯一答案。

【解决方案2】：

使用jQuery的延迟(n);方法 http://api.jquery.com/delay/

 $(function() {
      $("#div1 img").hover(function(){
        $("#div2").show().delay( 10000 ).hide(0);
      });
    });

【讨论】：

您的代码中有两个错误： 1. hover() 方法，当只提供一个函数参数时，在 mouseenter 和 mouseleave 上都执行该函数，即显然不是 OP 想要的，2. delay() 方法仅适用于动画，不适用于 show() 或 hide()（注意：如果您为 show() 或 hide() 提供参数，它会变成动画然后它确实起作用了）。您的代码show().delay(10000).hide() 将立即隐藏元素，而不是在 10 秒后隐藏。
参见answer by @user113716 以了解正确用法。

【解决方案3】：

接受的答案是这里唯一好的答案。

我留下一个答案，因为大多数其他人都因各种原因而失败。

如果你想使用.delay()，延迟的项目需要是队列的一部分。 .hide() 方法不是。但如果你给.hide() 一个持续时间，它就是。

所以你可以这样做：

var $div2 = $('#div2');

$('#div1').mouseenter(function() {
    $div2.show().delay( 10000 ).hide( 0 );
});

0 持续时间使 .hide() 成为队列的一部分。您不想使用.hover()，因为它会为mouseenter 触发一次，为mouseleave 触发一次。这不是我们想要的。

一些使用setTimeout() 的答案会失败，因为如果有多个mouseenter 事件，那么就会进行多个setTimeout() 调用。接受的答案解决了这个问题。

【讨论】：

如果使用 jQuery，我更喜欢这个答案而不是公认的答案。干杯！

【解决方案4】：

作为鼠标悬停功能的一部分：

setTimeout(function(d){
  item.hide();
}, 10000);

这假定var item 是您要隐藏的 div 的 jquery 对象。参数10000 是以毫秒为单位的延迟。 10s * 1000ms/1s = 10000ms

【讨论】：

我投了这个票，因为即使这个问题被标记为 [jquery]，它也没有专门要求 jQuery 解决方案。

【解决方案5】：

$(function() {
    $("div1 img").hover(
        function() { //mouse over show div
            $("div2").show(); //.delay(10000).fadeOut();
        },
        function() { // mouse out, start timer to hide
            //$("div2").delay(10000).fadeOut();
        }
    );    
});

【讨论】：

你的意思是setTimeout？ setInterval 将每 10 秒重复一次，除非取消。
@hunter 这会在 10 秒后隐藏 div 2 吗？
我想显示 div2 10 秒，10 秒后它应该淡出
为了让事情变得简单，如果 div2 在屏幕上出现超过 10 秒，它应该淡出..

【解决方案6】：

var $div2 = $('#div2');


$('#div1').mouseover( function(){
  $div2.show();

  setTimeout( function(){
    $div2.hide();
  }, 1000*10);

});

【讨论】：