wake-up-neo.net

Timeout jQuery-Effekte

Ich versuche, ein Element einzublenden, und dann in 5000 ms wieder auszublenden. Ich weiß, dass ich etwas machen kann wie:

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

Aber das wird nur das Ausblenden steuern, würde ich das oben auf dem Rückruf hinzufügen?

jquerytimeout
100
Coughlin

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

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

Hinweis : $.show() und $.hide() werden standardmäßig nicht in die Warteschlange gestellt. Wenn Sie also $.delay() mit ihnen müssen Sie sie so konfigurieren:

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

Sie könnten möglicherweise die Queue-Syntax 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);

das würde (theoretisch, wenn Sie hier am Gedächtnis arbeiten) Ihnen erlauben, dies zu tun:

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

Ich habe es gerade unten herausgefunden:

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

Ich werde den Beitrag für andere Benutzer behalten!

23
Coughlin

Großartiger Hack von @strager. Implementiere es in jQuery wie folgt:

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

Und dann benutze es als:

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

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.

11
strager

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

Überprüfen Sie es hier: jQuery doTimeout: Wie setTimeout, aber besser.

7
jason

Um es so verwenden zu können, müssen Sie this zurückgeben. Ohne die Rückgabe erhält fadeOut ('slow') kein Objekt, an 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');
5
user128026

Dies ist mit nur wenigen Zeilen von jQuery möglich:

$(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 folgenden Geige ...

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

1
DaveAlger