Effets jQuery Timeout

Question

J'essaie de faire apparaître un élément en fondu, puis de le faire réapparaître en 5000 ms. Je sais que je peux faire quelque chose comme :

setTimeout(function () { $(".notice").fadeOut(); }, 5000);

Mais cela ne contrôlera que le fondu enchaîné, dois-je ajouter ce qui précède sur le rappel ?

Answer 1

Mise à jour : À partir de la version 1.4 de jQuery, vous pouvez utiliser la fonction .delay( n ) méthode. http://api.jquery.com/delay/

$('.notice').fadeIn().delay(2000).fadeOut('slow'); 

Note : $.show() y $.hide() par défaut ne sont pas mis en file d'attente, donc si vous voulez utiliser les $.delay() avec eux, vous devez les configurer de cette façon :

$('.notice')
    .show({duration: 0, queue: true})
    .delay(2000)
    .hide({duration: 0, queue: true});

---

Vous pouvez éventuellement utiliser la syntaxe Queue, cela pourrait fonctionner :

jQuery(function($){ 

var e = $('.notice'); 
e.fadeIn(); 
e.queue(function(){ 
  setTimeout(function(){ 
    e.dequeue(); 
  }, 2000 ); 
}); 
e.fadeOut('fast'); 

}); 

ou vous pouvez être vraiment ingénieux et créer une fonction jQuery pour le faire.

(function($){ 

  jQuery.fn.idle = function(time)
  { 
      var o = $(this); 
      o.queue(function()
      { 
         setTimeout(function()
         { 
            o.dequeue(); 
         }, time);
      });
  };
})(jQuery);

ce qui vous permettrait (en théorie, de mémoire) de faire ceci :

$('.notice').fadeIn().idle(2000).fadeOut('slow');

Answer 2

Je viens de le découvrir ci-dessous :

$(".notice")
   .fadeIn( function() 
   {
      setTimeout( function()
      {
         $(".notice").fadeOut("fast");
      }, 2000);
   });

Je vais garder le poste pour les autres utilisateurs !

Answer 3

Superbe piratage par @strager. Implémentez-le dans jQuery comme ceci :

jQuery.fn.wait = function (MiliSeconds) {
    $(this).animate({ opacity: '+=0' }, MiliSeconds);
    return this;
}

Et ensuite l'utiliser comme :

$('.notice').fadeIn().wait(2000).fadeOut('slow');

Answer 4

Vous pouvez faire quelque chose comme ça :

$('.notice')
    .fadeIn()
    .animate({opacity: '+=0'}, 2000)   // Does nothing for 2000ms
    .fadeOut('fast');

Malheureusement, vous ne pouvez pas simplement faire .animate({}, 2000) -- je pense qu'il s'agit d'un bug, et je le signalerai.

Answer 5

Ben Alman a écrit un superbe plugin pour jQuery appelé doTimeout. Il a beaucoup de fonctionnalités intéressantes !

Découvrez-le ici : jQuery doTimeout : Comme setTimeout, mais mieux .