2010-09-07 17 views
34

¿qué pasa con eso?jQuery: append() objeto, eliminar() con la demora()

$('body').append("<div class='message success'>Upload successful!</div>"); 
$('.message').delay(2000).remove(); 

Quiero anexar un mensaje de éxito a mi documento html, pero solo para 2 segundos. Después de eso, el div debe borrarse nuevamente.

¿Qué estoy haciendo mal aquí?

respecto

Respuesta

86

Uso setTimeout() directamente (que .delay() utiliza internamente) es más simple aquí, ya .remove() no es una función de la cola, en general, debería tener este aspecto:

$('body').append("<div class='message success'>Upload successful!</div>"); 
setTimeout(function() { 
    $('.message').remove(); 
}, 2000); 

You can give it a try here.

.delay() es para la animación (o cualquier nombre) de cola, para usarlo tendría que hacer algo como:

$("<div class='message success'>Upload successful!</div>").appendTo('body') 
    .delay(2000).queue(function() { $(this).remove(); }); 

Which works, here ... pero es sólo una exageración y terriblemente ineficiente, en aras de encadenar a la OMI. Normalmente también deberías llamar a dequeue o a la siguiente función, pero dado que estás eliminando el elemento de todos modos ...

+0

+1 siempre proporcionando buenas respuestas jquery similares a la que proporcionó f o yo antes ... –

+0

@ Shog9 - Para ser * completamente * preciso no son * solo * animaciones, es solo * por defecto * las animaciones de cola 'fx' se ejecutan, pero puede haber cualquier cola si pasa un nombre :) –

+0

Woops, borró ese comentario desde que actualizó su respuesta. Pero está en lo cierto, el soporte de cola es bastante general y podría usarse para otras cosas, las animaciones simplemente lo hacen por defecto. – Shog9

2

Quizás estoy usando un jQuery obsoleto, pero ninguno de los métodos sugeridos en otras respuestas parece funcionar para mí De acuerdo con http://api.jquery.com/delay/, la demora es para efectos de animación.

Usando setTimeout() sin embargo, funciona muy bien para mí:

$('body').append("<div class='message success'>Upload successful!</div>"); 
setTimeout(function(){ 
    $(".message").remove(); 
}, 2000); 
+0

No pase una cadena a 'setTimeout()' !, pase una función anónima :) –

0

Y sólo por diversión, se puede hacer lo siguiente, usando retardo:

$('body').append("<div class='message success'>Upload successful!</div>"); 
$('.message').show('fast').delay(2000).hide('fast') 
$('.message').remove(); 
+5

Eso casi seguro eliminará el elemento antes de que se haya mostrado ... – Shog9

+0

@ Shog9. Tienes razón. Lo tenía trabajando en jsfiddle ... debe haber sido un fragmento diferente. Extraño. – Strelok

+0

Sucedió tropezar con esta pregunta y respuesta al buscar setTimeout y vio que todavía está activo. No tengo idea de si podrías hacer esto en 2010, pero hoy en día puedes usar una función como un segundo parámetro en tu función ocultar. Así que solo para las patadas podrías hacer '$ ('. Message'). Show ('rápido'). Delay (2000) .hide ('rápido', función() {$ ('. Mensaje'). Eliminar()}); '=) – timo

4

pienso de esa manera correcta de hacerlo es para utilizar el método de cola jQuery:

$("<div class='message success'>Upload successful!</div>") 
     .appendTo('body') 
     .delay(2000) 
     .queue(function() { 
      $(this).remove(); 
     }); 
Cuestiones relacionadas