2010-09-07 17 views
34

cosa c'è di sbagliato in questo?jQuery: append() oggetto, remove() con delay()

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

Desidero aggiungere un messaggio di successo al mio documento html, ma solo per 2 secondi. Successivamente il div deve essere cancellato di nuovo.

cosa sto facendo di sbagliato qui?

riguarda

risposta

86

Uso setTimeout() direttamente (che .delay() usa internamente) è più semplice qui, dal momento che .remove() non è una funzione in coda, nel complesso dovrebbe assomigliare a questo:

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

You can give it a try here.

.delay() è per l'animazione (o qualunque nome) della coda, per usarlo dovreste fare qualcosa di simile:

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

Which works, here ... ma è solo eccessivo e terribilmente inefficiente, per il bene di incatenare l'IMO. Normalmente dovresti anche chiamare la dequeue o la funzione successiva, ma visto che stai rimuovendo l'elemento comunque ...

+0

+1 fornendo sempre risposte jquery simili a quelle fornite o io prima ... –

+0

@ Shog9 - Per essere * completamente * accurato non è * solo * animazioni, è solo * di default * le animazioni della coda 'fx' vengono eseguite, ma può essere una qualsiasi coda se viene passato un nome :) –

+0

Woops, cancellato quel commento da quando hai aggiornato la tua risposta. Ma tu hai ragione, il supporto per la coda è abbastanza generico e potrebbe essere usato per altre cose - le animazioni sono predefinite. – Shog9

2

Forse sto usando un jQuery obsoleto, ma nessuno dei metodi suggerito in altre risposte sembra funzionare per me. Secondo http://api.jquery.com/delay/, il ritardo è per gli effetti di animazione.

Utilizzando setTimeout() tuttavia, funziona bene per me:

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

Non passare una stringa a 'setTimeout()' !, passa una funzione anonima :) –

0

E solo per calci, si potrebbe fare quanto segue, con ritardo:

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

Questo quasi certamente rimuoverà l'elemento prima che sia stato anche mostrato ... – Shog9

+0

@ Shog9. Hai ragione. Ho appena funzionato in un jsfiddle ... deve essere stato un frammento diverso. Strano. – Strelok

+0

È accaduto per imbattersi in questa domanda e rispondere quando si è cercato setTimeout e si è visto che si è ancora attivi. Non ho idea di poterlo fare nel 2010, ma al giorno d'oggi puoi usare una funzione come secondo parametro nella funzione nascondi. Quindi per i calci si potrebbe fare '$ ('. Message'). Show ('fast'). Delay (2000) .hide ('fast', function() {$ ('. Message'). Remove()}); = =) – timo

4

Credo che corretto modo di fare che è utilizzare il metodo jQuery queue:

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