web-dev-qa-db-fra.com

Effets jQuery expirés

J'essaie de faire fondre un élément, puis de nouveau en 5 000 ms. Je sais que je peux faire quelque chose comme:

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

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

jquerytimeout
100
Coughlin

Mise à jour: À partir de jQuery 1.4, vous pouvez utiliser la méthode .delay( n ). 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 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 pourrait 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 faire 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 (en théorie, travailler sur la mémoire) vous permettrait de faire ceci:

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

Je viens de comprendre ci-dessous:

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

Je garderai le message pour les autres utilisateurs!

23
Coughlin

Super bidouille 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');
14
Arash Milani

Vous pouvez faire quelque chose comme ça:

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

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

11
strager

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

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

7
jason

Pour pouvoir l'utiliser comme ça, vous devez retourner this. Sans le retour, fadeOut ('slow') ne permettra pas à un objet d'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 fais ceci:

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

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/

1
DaveAlger