javascript - page - removeattr disabled

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

Question

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

Estoy usando el método jQuery fadeOut para atenuar 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

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 2

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

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

Answer 3

Mientras que el enfoque de @John Sheehan funciona, te encuentras con el error jQuery fadeIn / fadeOut ClearType en IE7. Personalmente, optaría por el enfoque setTimeout() @John Millikin, pero si tiene 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 que el complemento jQuery FxQueues hace justo lo que necesita:

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

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

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

Answer 6

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

Los siguientes trabajos, sin embargo (al omitir el método remove() ):

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

No me importa si hay DIV ocultos en la página (de todos modos, no debe haber más).

Answer 7

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

Donde $elem es el elemento que desea ocultar y 5000 es la demora en milisegundos. En realidad, puede usar cualquier función dentro de la llamada a setTimeout() , ese código solo define una pequeña función anónima para simplificar.

Answer 8

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