¿Cómo pausar antes de desvanecer un elemento usando jQuery?

Question

Me gustaría mostrar un mensaje de éxito en mi página.

Estoy utilizando el método jQuery fadeOut para fundir y luego eliminar el elemento. Puedo aumentar la duración para que dure más, sin embargo, esto parece extraño.

Lo que me gustaría que ocurra es que el elemento se muestre durante cinco segundos, luego desaparezca rápidamente y finalmente se elimine.

¿Cómo se puede animar usando jQuery?

Answer 1

La nueva función delay() en jQuery 1.4 debería hacer el truco.

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove(); 

Answer 2

uso setTimeout(function(){$elem.hide();}, 5000);

Dónde $elem es el elemento que desea ocultar, y 5000 es el retraso en milisegundos. Puede usar cualquier función dentro de la llamada al setTimeout(), ese código solo define una pequeña función anónima para simplificar.

Answer 3

var $msg = $('#msg-container-id'); 
$msg.fadeIn(function(){ 
    setTimeout(function(){ 
    $msg.fadeOut(function(){ 
     $msg.remove(); 
    }); 
    },5000); 
}); 

Answer 4

Para un enfoque jQuery puro, que puede hacer

$("#element").animate({opacity: 1.0}, 5000).fadeOut(); 

Es un truco, pero hace el trabajo

Answer 5

Mientras que el enfoque de @ John Sheehan funciona, se corre en el jQuery fadeIn/fadeOut ClearType glitch en IE7 . Personalmente, optaría por el enfoque setTimeout() de @John Millikin, pero si se establece en un enfoque jQuery puro, es mejor activar una animación en una propiedad que no sea de opacidad, como un margen.

var left = parseInt($('#element').css('marginLeft')); 
$('#element') 
    .animate({ marginLeft: left ? left : 0 }, 5000) 
    .fadeOut('fast'); 

Puede ser un poco más limpia si sabe que su margen de ser un valor fijo:

$('#element') 
    .animate({ marginLeft: 0 }, 5000) 
    .fadeOut('fast'); 

EDITAR: Parece que el jQuery FxQueues plug-in hace exactamente lo que necesita:

$('#element').fadeOut({ 
    speed: 'fast', 
    preDelay: 5000 
}); 

Answer 6

A raíz del comentario de dansays, lo siguiente parece funcionar perfectamente bien:

$('#thing') .animate({dummy:1}, 2000) .animate({ etc ... });

Answer 7

La respuesta de dansays simplemente no funciona para mí. Por algún motivo, remove() se ejecuta inmediatamente y el div desaparece antes de que ocurra cualquier animación.

las siguientes obras, sin embargo (omitiendo el método remove()):

$('#foo').fadeIn(500).delay(5000).fadeOut(500); 

no me importa si hay DIV oculto en la página (no debería ser más que unos pocos de todos modos).

Answer 8

1.6.2 Actualización para

respuesta de Nathan Long hará que el elemento de hacer estallar sin obedecer retraso o fadeOut.

Esto funciona:

$('#foo').delay(2000).fadeOut(2000);