¿Cómo se hace una pausa antes de desvanecer un elemento usando jQuery?

Question

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

Estoy usando jQuery fadeOut método para desvanecer 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 sucediera es que el elemento se muestre durante cinco segundos, luego se desvanezca rápidamente y finalmente se elimine.

¿Cómo puedes animar esto usando jQuery?

Answer 1

El nuevo delay() La función en jQuery 1.4 debería funcionar.

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

Answer 2

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

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

Answer 3

Si bien el enfoque de @John Sheehan funciona, te topas con el Fallo de jQuery fadeIn/fadeOut ClearType en IE7.Personalmente, optaría por @John Millikin. setTimeout() enfoque, pero si está configurado 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 limpio si sabe que su margen es un valor fijo:

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

EDITAR:Parece el Complemento jQuery FxQueues hace justo lo que necesitas:

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

Answer 4

Para un enfoque jQuery puro, puedes hacer

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

Es un truco, pero hace el trabajo.

Answer 5

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

Answer 6

Siguiendo el comentario de dansays, lo siguiente parece funcionar perfectamente bien:

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

Answer 7

Actualización para 1.6.2

La respuesta de Nathan Long hará que el elemento salte sin obedecer demora o fadeOut.

Esto funciona:

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

Answer 8

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

Sin embargo, lo siguiente funciona (al omitir el remove() método):

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

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