Cómo mostrar div durante 10 segundos y luego ocultarlo

Tengo el bloque div que viene en mouseover de otro div.Cómo mostrar div durante 10 segundos y luego ocultarlo

div1 img // mouse over muestra div2.

Quiero mostrar div2 durante 10 segundos y luego ocultarlo, puede usted por favor dígame cómo achive esta

Gracias

2010-11-08 kobe

Publique una muestra de HTML para obtener la mejor respuesta. Podría haber problemas de orden de evento si los divs están anidados. – Silkster

@silkster, la próxima vez definitivamente lo haré. Obtuve la respuesta, muchas gracias – kobe

Posible duplicado de [jQuery show por 5 segundos y luego ocultar] (http://stackoverflow.com/questions/3428766/jquery-show-for-5-seconds-then-hide) –

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

Otra manera de ir:

$("#div1").mouseenter(function() { 
    var $div2 = $("#div2"); 
    if ($div2.data("active")) { return; } 
    $div2.show().data("active", true); 
    setTimeout(function() { 
     $div2.hide().data("active", false); 
    }, 10000); 
});

Fuente

2010-11-08 20:06:54

@ mismo Gracias es perfecto. – kobe

@sime una cosa más, si es visible, debe esconderse después de 10 segundos ... no deberíamos volver allí correctamente. SI es visible, debemos establecer la función setTimout en ese – kobe

@gov ¿El # div2 está oculto al principio? –

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

Fuente

2010-11-08 20:03:07 hunter

usted significa setTimeout? setInterval se repetirá cada 10 s a menos que se cancele. – zzzzBov

@ hunter ocultará div 2 después de 10 segundos? – kobe

quiero mostrar div2 por 10 segundos, después de 10 segundos debería desvanecerse – kobe

como parte de la función mouseover:

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

Esto supone que var item es el objeto jquery del div que desea ocultar. El parámetro 10000 es el retraso en milisegundos. 10s * 1000ms/1s = 10000ms

Fuente

2010-11-08 20:03:47 zzzzBov

He votado por esta porque, aunque esta pregunta está etiquetada como [jquery], no solicita una solución jQuery específicamente. –

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


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

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

});

Fuente

2010-11-08 20:03:57 Harmen

muchas gracias, funcionó perfecto. – kobe

Use la demora de jQuery (n); Método http://api.jquery.com/delay/

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

Fuente

2010-11-08 20:05:35 FatherStorm

+1 por brevedad ... – Kasturi

Esta respuesta es incorrecta (a pesar de todos los votos). – user113716

Hay dos errores en su código: 1. el método hover(), cuando se suministra con solo un argumento de función, ejecuta esa función en mouseenter ** y mouseleave **, que claramente no es lo que el OP quiere, 2. el El método delay() solo funciona con animaciones y no con show() u hide() (Nota: si proporciona un argumento para mostrar() u ocultar(), se convierte en una animación y luego funciona). Su código 'show(). Delay (10000) .hide()' ocultará el elemento ** inmediatamente ** y no después de 10 segundos. –

La respuesta aceptada es el único bueno aquí.

Estoy dejando una respuesta porque la mayoría de las otras fallan por varias razones.

Si desea utilizar .delay(), el elemento retrasado debe formar parte de la cola. El método .hide() no lo es. Pero si le das a .hide() una duración, es.

Así que usted puede hacer esto:

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

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

La duración 0 hace .hide() parte de la cola. No desea utilizar .hover() porque se activará una vez para mouseenter y una vez para mouseleave. Esto no es lo que se quería.

Algunas de las respuestas que usan setTimeout() fallan porque si hay varios eventos mouseenter, se realizan varias llamadas setTimeout(). La respuesta aceptada evita esto.

Fuente

2010-11-08 22:03:26 user113716

gracias por su explicación es bueno. – kobe

Cómo mostrar div durante 10 segundos y luego ocultarlo

Respuesta

Cuestiones relacionadas