如何显示DIV 10秒,然后隐藏它

$("#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);
});

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

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

公认的答案是这里唯一的好答案。

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

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

所以你可以这样做:

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

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

这个 0 持续时间使 .hide()。 队列的一部分。你不想用 .hover() 因为它会燃烧一次 mouseenter 一次就为了 mouseleave . 这不是我们想要的。

一些答案使用 setTimeout() 失败,因为如果有几个 鼠标输入 事件,然后是几个 设置超时() 打电话。公认的答案可以解决这个问题。

作为mouseover函数的一部分:

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

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

$(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();
        }
    );    
});

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


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

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

});