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

Question

我有div块,它来自另一个div的鼠标悬停.

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

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

谢谢

Answer 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);
});

Answer 2

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

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

Answer 3

接受的答案是这里唯一的好处.

我要留下答案了,因为大多数其他人因各种原因而失败.

如果要使用.delay(),延迟的项目需要成为队列的一部分.该.hide()方法是没有的.但如果你给出.hide()持续时间,那就是.

所以你可以这样做:

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

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

的0持续时间使得.hide()所述队列的一部分.你不想使用,.hover()因为它会为mouseenter一次和一次点火mouseleave.这不是想要的.

一些答案使用setTimeout()失败,因为如果有多个mouseenter事件,则进行多次setTimeout()调用.接受的答案绕过了这一点.

Answer 4

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

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

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