Как показать div в течение 10 секунд, а затем скрыть его

У меня есть div-блок, который появляется при наведении указателя мыши на другой div.

div1 img//mouse over показывает div2.

Я хочу показать div2 в течение 10 секунд, а затем скрыть его, можете ли вы рассказать мне, как достичь этого?

Спасибо

Ответ 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);
});

Ответ 2

Используйте jQuery delay (n); метод http://api.jquery.com/delay/

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

Ответ 3

Принятый ответ является единственным хорошим здесь.

Я оставляю ответ, потому что большинство других не могут по различным причинам.

Если вы хотите использовать .delay(), отложенный элемент должен быть частью очереди. Метод .hide() - нет. Но если вы даете .hide() длительность, это так.

Итак, вы можете сделать это:

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

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

Продолжительность 0 делает .hide() частью очереди. Вы не хотите использовать .hover(), потому что он будет срабатывать один раз для mouseenter и один раз для mouseleave. Это не то, что нужно.

Некоторые ответы с использованием setTimeout() завершаются с ошибкой, потому что, если есть несколько событий mouseenter, тогда производится несколько вызовов setTimeout(). Об этом говорит принятый ответ.

Ответ 4

как часть функции мыши:

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

Предполагается, что var item - это объект jquery для div, который вы хотите скрыть. Параметр 10000 - это задержка в миллисекундах. 10 с * 1000 мс /1 с = 10000 мс

Ответ 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();
        }
    );    
});

Ответ 6

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


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

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

});