Come attendere 5 secondi con jQuery?

Sto cercando di creare un effetto in cui la pagina viene caricata e dopo 5 secondi, il messaggio di successo sullo schermo si attenua o si sposta verso l'alto.

Come posso raggiungere questo obiettivo?

Set JavaScript incorporatoTimeout .

setTimeout(
  function() 
  {
    //do something special
  }, 5000);

AGGIORNAMENTO : vuoi aspettare da quando il caricamento della pagina è terminato, quindi inserisci quel codice nello $(document).ready(...);script.

AGGIORNAMENTO 2 : jquery 1.4.0 ha introdotto il .delaymetodo. Dai un'occhiata . Si noti che .delay funziona solo con le code degli effetti jQuery.

Usa un normale timer JavaScript:

$(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
});

Questo attenderà 5 secondi dopo che il DOM è pronto. Se vuoi aspettare fino a quando la pagina è effettivamente loadeddevi usare questo:

$(window).load(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
})

EDIT: in risposta al commento del PO che chiede se esiste un modo per farlo in jQuery e non usarlosetTimeout la risposta è no. Ma se volessi renderlo più "jQueryish" potresti avvolgerlo in questo modo:

$.wait = function( callback, seconds){
   return window.setTimeout( callback, seconds * 1000 );
}

Potresti quindi chiamarlo così:

$.wait( function(){ $("#message").slideUp() }, 5);

Ho incontrato questa domanda e ho pensato di fornire un aggiornamento su questo argomento. jQuery (v1.5 +) include un Deferredmodello che (nonostante non aderisca alle specifiche Promises / A fino a jQuery 3) è generalmente considerato come un modo più chiaro per affrontare molti problemi asincroni. L'implementazione di un $.wait()metodo usando questo approccio è particolarmente leggibile credo:

$.wait = function(ms) {
    var defer = $.Deferred();
    setTimeout(function() { defer.resolve(); }, ms);
    return defer;
};

Ed ecco come puoi usarlo:

$.wait(5000).then(disco);

Tuttavia, se, dopo aver messo in pausa, desideri solo eseguire azioni su una singola selezione di jQuery, allora dovresti utilizzare il nativo di jQuery, .delay()che a mio avviso utilizza anche quello di Deferred:

$(".my-element").delay(5000).fadeIn();

setTimeout(function(){


},5000); 

Inserisci il tuo codice all'interno del { }

300 = 0.3 seconds

700 = 0.7 seconds

1000 = 1 second

2000= 2 seconds

2200 = 2.2 seconds

3500 = 3.5 seconds

10000 = 10 seconds

eccetera.

Ho usato questo per una sovrapposizione di messaggi che può essere chiusa immediatamente al clic o fa una chiusura automatica dopo 10 secondi.

button = $('.status-button a', whatever);
if(button.hasClass('close')) {
  button.delay(10000).queue(function() {
    $(this).click().dequeue();
  });
}

La libreria Underscore offre anche una funzione di "ritardo":

_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');

Sulla base della risposta di Joey, mi è venuta in mente una soluzione prevista (di jQuery, leggi "coda").

Segue in qualche modo la sintassi jQuery.animate () - consente di essere concatenato con altre funzioni fx, supporta 'slow' e altri jQuery.fx.speeds oltre ad essere completamente jQuery. E verrà gestito allo stesso modo delle animazioni, se le interrompi.

Il campo di prova jsFiddle con più usi (come mostrare .stop ()), può essere trovato qui .

il nucleo della soluzione è:

$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) => { $('#result').text('done.'); next(); } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

il tutto come un plugin, supportando l'utilizzo di $ .wait () e $ (..). wait ():

// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) {

  $.wait = function(duration, completeCallback, target) {
    $target = $(target || '<queue />');
    return $target.delay(duration).queue(function(next){completeCallback && completeCallback.call($target); next();});
  }

  $.fn.wait = function(duration, completeCallback) {
    return $.wait.call(this, duration, completeCallback, this);
  };

})(jQuery);

//TEST
$(function() {

  // stand alone
  $.wait(1000, function() {
    $('#result')
    .append('...done');
  });

  // chained
  $('#result')
  .append('go...')
  .wait('slow', function() {
    $(this).append('after slow');
  })
  .css({color: 'green'});
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Nota: poiché wait si aggiunge allo stack di animazione, $ .css () viene eseguito immediatamente - come si suppone: comportamento jQuery previsto.

$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );

Renditi conto che questa è una vecchia domanda, ma ho scritto un plug-in per risolvere questo problema che qualcuno potrebbe trovare utile.

https://github.com/madbook/jquery.wait

ti permette di fare questo:

$('#myElement').addClass('load').wait(2000).addClass('done');