Effets jQuery de timeout

101

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?

jquery timeout Coughlin
la source

Réponses:

197

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');
Kent Fredric
la source
1
Je me demande pourquoi vous utilisez la file d'attente alors qu'une simple utilisation de setTimeout fonctionnera également.
SolutionYogi
33
parce que si vous utilisez la file d'attente, il est facile d'ajouter de nouveaux événements et de réutiliser le code, et la réutilisation de code est un GoodThing ™
Kent Fredric
2
Notez que, comme également indiqué dans la documentation de l'API jQuery, delay () ne devrait vraiment être utilisé que pour les choses liées à la file d'attente d'effets. Si vous avez besoin d'un délai pour autre chose, setTimeout () est toujours la voie à suivre.
scy
Wow, merci pour le lien @bottlenecked, je suppose que la raison pour laquelle mon exemple est si similaire à la nouvelle fonctionnalité ajoutée à jQuery est qu'il y a une chaîne d'influence notable de cette réponse à bugs.jquery.com/ticket/4102 = P
Kent Fredric
23

Je viens de le comprendre ci-dessous:

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

Je garderai le message pour les autres utilisateurs!

Coughlin
la source
14

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');
Arash Milani
la source
11

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.

strager
la source
5

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');
user128026
la source
1

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/

DaveAlger
la source