Timeout jQuery-Effekte

101

Ich versuche, ein Element einblenden zu lassen, dann in 5000 ms wieder auszublenden. Ich weiß, dass ich so etwas tun kann:

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

Aber das wird nur das Ausblenden kontrollieren. Würde ich das oben genannte beim Rückruf hinzufügen?

jquery timeout

— Coughlin
quelle

197

Update: Ab jQuery 1.4 können Sie die .delay( n )Methode verwenden. http://api.jquery.com/delay/

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

Hinweis : $.show()und sind $.hide()standardmäßig nicht in der Warteschlange. Wenn Sie sie also verwenden möchten $.delay(), müssen Sie sie folgendermaßen konfigurieren:

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

Sie könnten möglicherweise die Warteschlangensyntax verwenden, dies könnte funktionieren:

jQuery(function($){ 

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

});

oder Sie könnten wirklich genial sein und eine jQuery-Funktion erstellen, um dies zu tun.

(function($){ 

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

was Ihnen (theoretisch hier an der Erinnerung arbeiten) erlauben würde, dies zu tun:

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

— Kent Fredric
quelle

1

Ich frage mich, warum Sie die Warteschlange verwenden, wenn eine einfache Verwendung von setTimeout ebenfalls funktioniert.

— SolutionYogi

33

Denn wenn Sie die Warteschlange verwenden, ist es einfach, dem Code neue Ereignisse hinzuzufügen und ihn wiederzuverwenden, und die Wiederverwendung von Code ist ein GoodThing ™

— Kent Fredric

2

Beachten Sie, dass delay (), wie auch in der jQuery-API-Dokumentation angegeben, eigentlich nur für Dinge verwendet werden sollte, die mit der Effektwarteschlange zusammenhängen. Wenn Sie eine Zeitüberschreitung für etwas anderes benötigen, ist setTimeout () immer noch der richtige Weg.

— scy

Wow, danke für den Link @bottlenecked. Ich denke, der Grund dafür, dass mein Beispiel der neuen Funktion von jQuery so ähnlich ist, ist, dass diese Antwort auf bugs.jquery.com/ticket/4102 = P

— Kent Fredric

23

Ich habe es gerade unten herausgefunden:

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

Ich werde den Beitrag für andere Benutzer behalten!

— Coughlin
quelle

14

Toller Hack von @strager. Implementieren Sie es wie folgt in jQuery:

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

Und dann benutze es als:

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

— Arash Milani
quelle

11

Sie können so etwas tun:

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

Leider können Sie nicht einfach .animate ({}, 2000) ausführen - ich denke, dies ist ein Fehler und werde ihn melden.

— Strager
quelle

7

Ben Alman hat ein süßes Plugin für jQuery namens doTimeout geschrieben. Es hat viele schöne Funktionen!

Probieren Sie es hier aus: jQuery doTimeout: Wie setTimeout, aber besser .

— Jason
quelle

5

Um es so verwenden zu können, müssen Sie zurückkehren this. Ohne die Rückgabe erhält fadeOut ('slow') kein Objekt, mit dem diese Operation ausgeführt werden kann.

Dh:

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

Dann mach das:

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

— user128026
quelle

1

Dies kann mit nur wenigen Zeilen jQuery erfolgen:

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

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

Ein funktionierendes Beispiel finden Sie in der Geige unten ...

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

— DaveAlger
quelle