Come si fa a mettere in pausa prima di svanire un elemento utilizzando jQuery?

Question

Vorrei flash un messaggio di successo sulla mia pagina.

Sto utilizzando jQuery fadeOut metodo per dissolvere e rimuovere l'elemento.Posso aumentare la durata per farlo durare di più, però questo sembra strano.

Quello che vorrei accadere è l'elemento visualizzato per cinque secondi, poi si dissolvono rapidamente, e, infine, essere rimossi.

Come si può animare questo utilizzo di jQuery?

Answer 1

Il nuovo delay() funzione in jQuery 1.4 dovrebbe fare il trucco.

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

Answer 2

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

Dove $elem è l'elemento che si desidera nascondere e 5000 è il ritardo in millisecondi.Si può effettivamente utilizzare qualsiasi funzione all'interno del bando di setTimeout(), che il codice definisce solo una piccola funzione anonima per motivi di semplicità.

Answer 3

Mentre @John Sheehan approccio funziona, puoi jQuery fadeIn/fadeOut ClearType glitch in IE7.Personalmente, mi piacerebbe optare per @Giovanni Millikin s setTimeout() approccio, ma se il gioco è impostato su un puro jQuery approccio migliore per attivare un'animazione su un non-proprietà opacità, come un margine di.

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

Si può essere un po ' di più se sai che il tuo margine di un valore fisso:

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

MODIFICA:Sembra che l' jQuery FxQueues plug-in non solo ciò di cui avete bisogno:

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

Answer 4

Per un puro jQuery approccio, si può fare

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

Si tratta di un hack, ma fa il lavoro

Answer 5

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

Answer 6

Dopo dansays' di commento, il seguente sembra funzionare perfettamente:

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

Answer 7

Aggiornamento per la 1.6.2

Nathan Long risposta causerà l'elemento pop off senza obbedire ritardo o fadeOut.

Questo funziona:

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

Answer 8

dansays la risposta semplicemente non funziona per me.Per qualche motivo, remove() viene eseguito immediatamente e il div scompare prima di qualsiasi animazioni accadere.

Le seguenti opere, tuttavia (omettendo il remove() il metodo):

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

Non so se ci sono nascosti i Div della pagina (non dovrebbe essere più di un paio, comunque).