Zaman aşımı jQuery efektleri

Bir öğenin solmasını sağlamaya çalışıyorum, sonra 5000 ms'de tekrar kayboluyor. Şunun gibi bir şey yapabileceğimi biliyorum:

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

Ancak bu yalnızca solmayı kontrol edecek, geri aramaya yukarıdakileri ekler miyim?

Güncelleme: jQuery 1.4'ten itibaren .delay( n )yöntemi kullanabilirsiniz . http://api.jquery.com/delay/

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

Not : $.show()ve $.hide()varsayılan olarak sıraya alınmaz, bu nedenle $.delay()onlarla birlikte kullanmak istiyorsanız , bunları şu şekilde yapılandırmanız gerekir:

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

Kuyruk sözdizimini kullanabilirsiniz, bu işe yarayabilir:

jQuery(function($){ 

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

}); 

veya gerçekten ustaca davranabilir ve bunu yapmak için bir jQuery işlevi yapabilirsiniz.

(function($){ 

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

bu (teoride, burada hafıza üzerinde çalışmak) bunu yapmanıza izin verir:

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

Ben sadece aşağıda anladım:

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

Gönderiyi diğer kullanıcılar için saklayacağım!

@Strager tarafından büyük hack. Bunu jQuery'ye şu şekilde uygulayın:

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

Ve sonra şu şekilde kullanın:

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

Bunun gibi bir şey yapabilirsiniz:

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

Maalesef .animate ({}, 2000) yapamazsınız - Bunun bir hata olduğunu düşünüyorum ve bunu bildireceğim.

Ben Alman, jQuery için doTimeout adında tatlı bir eklenti yazdı. Bir çok güzel özelliği var!

Şuradan kontrol edin: jQuery doTimeout: setTimeout gibi, ama daha iyi .

Onu bu şekilde kullanabilmek için geri dönmen gerekiyor this. Dönüş olmadan, fadeOut ('yavaş'), o işlemi gerçekleştirecek bir nesne almayacaktır.

Yani:

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

O zaman şunu yapın:

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

Bu, yalnızca birkaç jQuery satırı ile yapılabilir:

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

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

çalışan bir örnek için aşağıdaki kemere bakın ...

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