Come mostrare div per 10 secondi e poi nasconderlo

Question

Ho div blocco che arriva su un passaggio del mouse di un altro div.

div1 img // mouse spettacoli div2.

voglio mostrare div2 per 10 secondi e poi nasconderlo, potete per favore dirmi come raggiungere questo

Grazie

Answer 1

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

Un altro modo per andare:

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

$(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 3

come parte della funzione mouseover:

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

Ciò presuppone var item è l'oggetto jquery del div che si desidera nascondere. Il parametro 10000 è il ritardo in millisecondi. 10s * 1000ms/1s = 10000ms

Answer 4

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


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

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

}); 

Answer 5

Utilizzare il ritardo di jQuery (n); Metodo http://api.jquery.com/delay/

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

Answer 6

La risposta accettata è l'unica buona qui.

che sto lasciando una risposta perché la maggior parte degli altri non riescono, per vari motivi.

Se si desidera utilizzare .delay(), la voce in ritardo deve essere parte della coda. Il metodo .hide() no. Ma se si dà una durata a .hide(), lo è.

Così si può fare questo:

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

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

La durata 0 fa .hide() parte della coda. Se non si desidera utilizzare .hover() perché sarà il fuoco una volta per mouseenter e una volta per mouseleave. Questo non è quello che volevamo.

Alcune delle risposte che utilizzano setTimeout() non riescono perché se ci sono più eventi mouseenter, vengono effettuate più chiamate setTimeout(). La risposta accettata aggira questo.