Effets jQuery de timeout

J'essaie de faire apparaître un élément, puis de revenir en arrière dans 5000 ms. Je sais que je peux faire quelque chose comme:

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

Mais cela ne contrôlera que le fondu, est-ce que j'ajouterais ce qui précède au rappel?

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

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

Remarque : $.show()et $.hide()par défaut ne sont pas mis en file d'attente, donc si vous souhaitez les utiliser $.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 peut fonctionner:

jQuery(function($){ 

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

}); 

ou vous pourriez ê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, travailler ici sur la mémoire) de faire ceci:

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

Je viens de le comprendre ci-dessous:

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

Je garderai le message pour les autres utilisateurs!

Super hack par @strager. Implémentez-le dans jQuery comme ceci:

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

Et puis utilisez-le comme:

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

Vous pouvez faire quelque chose comme ceci:

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

Malheureusement, vous ne pouvez pas simplement faire .animate ({}, 2000) - Je pense que c'est un bogue et je vais le signaler.

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

Vérifiez-le ici: jQuery doTimeout: Comme setTimeout, mais mieux .

Pour pouvoir l'utiliser comme ça, vous devez revenir this. Sans le retour, fadeOut ('slow'), n'obtiendra pas d'objet sur lequel effectuer cette opération.

C'est à dire:

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

Alors faites ceci:

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

Cela peut être fait avec seulement quelques lignes de jQuery:

$(function(){
    // make sure img is hidden - fade in
    $('img').hide().fadeIn(2000);

    // after 5 second timeout - fade out
    setTimeout(function(){$('img').fadeOut(2000);}, 5000);
});​

voir le violon ci-dessous pour un exemple de travail ...

http://jsfiddle.net/eNxuJ/78/