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

Antworten:

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
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