Efek jQuery batas waktu

Saya mencoba untuk memiliki elemen yang memudar, lalu dalam 5000 ms, memudar kembali. Saya tahu saya bisa melakukan sesuatu seperti:

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

Tapi itu hanya akan mengontrol fade out, apakah saya akan menambahkan yang di atas pada callback?

Pembaruan: Pada jQuery 1.4 Anda dapat menggunakan .delay( n )metode ini. http://api.jquery.com/delay/

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

Catatan : $.show()dan $.hide()secara default tidak diantrekan, jadi jika Anda ingin menggunakannya $.delay(), Anda perlu mengkonfigurasinya seperti itu:

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

Anda mungkin dapat menggunakan sintaks Antrean, ini mungkin berfungsi:

jQuery(function($){ 

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

}); 

atau Anda bisa sangat cerdik dan membuat fungsi jQuery untuk melakukannya.

(function($){ 

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

yang (secara teori, mengerjakan memori di sini) mengizinkan Anda melakukan ini:

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

Saya baru saja menemukannya di bawah ini:

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

Saya akan menyimpan postingan untuk pengguna lain!

Retasan hebat oleh @strager. Terapkan ke jQuery seperti ini:

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

Dan kemudian gunakan sebagai:

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

Anda bisa melakukan sesuatu seperti ini:

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

Sayangnya, Anda tidak bisa begitu saja melakukan .animate ({}, 2000) - Saya rasa ini adalah bug, dan akan melaporkannya.

Ben Alman menulis plugin manis untuk jQuery yang disebut doTimeout. Ini memiliki banyak fitur bagus!

Lihat di sini: jQuery doTimeout: Suka setTimeout, tetapi lebih baik .

Untuk bisa menggunakannya seperti itu, Anda harus kembali this. Tanpa pengembalian, fadeOut ('slow'), tidak akan mendapatkan objek untuk menjalankan operasi itu.

Yaitu:

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

Lalu lakukan ini:

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

Ini dapat dilakukan hanya dengan beberapa baris 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);
});​

lihat biola di bawah ini untuk contoh yang berfungsi ...

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