Comment attendre 5 secondes avec jQuery?

J'essaie de créer un effet où la page se charge et après 5 secondes, le message de réussite à l'écran s'estompe ou glisse vers le haut.

Comment puis-je atteindre cet objectif?

Construit en javascript setTimeout .

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

MISE À JOUR : vous voulez attendre depuis la fin du chargement de la page, alors mettez ce code dans votre $(document).ready(...);script.

MISE À JOUR 2 : jquery 1.4.0 a introduit la .delayméthode. Vérifiez-le . Notez que .delay ne fonctionne qu'avec les files d'attente d'effets jQuery.

Utilisez un minuteur javascript normal:

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

Cela attendra 5 secondes après que le DOM soit prêt. Si vous voulez attendre que la page soit réellementloaded vous devez utiliser ceci:

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

EDIT: En réponse au commentaire du PO demandant s'il existe un moyen de le faire dans jQuery et de ne pas utilisersetTimeout la réponse, c'est non. Mais si vous vouliez le rendre plus "jQueryish", vous pourriez l'envelopper comme ceci:

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

Vous pourriez alors l'appeler comme ceci:

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

J'ai rencontré cette question et j'ai pensé fournir une mise à jour sur ce sujet. jQuery (v1.5 +) inclut un Deferredmodèle qui (bien qu'il n'adhère pas à la spécification Promises / A avant jQuery 3) est généralement considéré comme un moyen plus clair d'aborder de nombreux problèmes asynchrones. La mise en œuvre d'une $.wait()méthode utilisant cette approche est particulièrement lisible je crois:

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

Et voici comment vous pouvez l'utiliser:

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

Cependant , si, après une pause, vous souhaitez uniquement effectuer des actions sur une sélection de jQuery unique, alors vous devriez être en utilisant natif de jQuery .delay()que je crois utilise aussi de différé sous le capot:

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

setTimeout(function(){


},5000); 

Placez votre code à l'intérieur du { }

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

etc.

J'ai utilisé celui-ci pour une superposition de messages qui peut être fermée immédiatement en cliquant ou il se ferme automatiquement après 10 secondes.

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

La bibliothèque Underscore propose également une fonction "delay":

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

Sur la base de la réponse de Joey, j'ai trouvé une solution prévue (par jQuery, lire sur la «file d'attente»).

Il suit quelque peu la syntaxe jQuery.animate () - permet d'être enchaîné avec d'autres fonctions fx, prend en charge 'slow' et d'autres jQuery.fx.speeds tout en étant entièrement jQuery. Et sera géré de la même manière que les animations, si vous les arrêtez.

Le terrain de test jsFiddle avec plus d'utilisations (comme montrer .stop ()), peut être trouvé ici .

le cœur de la solution est:

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

le tout comme un plugin, prenant en charge l'utilisation de $ .wait () et $ (..). 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>

Remarque: comme l'attente ajoute à la pile d'animation, $ .css () est exécuté immédiatement - comme il est supposé: comportement jQuery attendu.

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

Sachez que c'est une vieille question, mais j'ai écrit un plugin pour résoudre ce problème que quelqu'un pourrait trouver utile.

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

vous permet de faire ceci:

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