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

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

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

Answer 6

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


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

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

});

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

6 个答案: