Efek jQuery batas waktu

101

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?

jquery timeout Coughlin
sumber

Jawaban:

197

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');
Kent Fredric
sumber
1
Saya bertanya-tanya mengapa Anda menggunakan antrian ketika penggunaan setTimeout yang sederhana juga akan berfungsi.
SolutionYogi
33
karena jika Anda menggunakan antrian, mudah untuk menambahkan acara baru dan menggunakan kembali kode tersebut, dan penggunaan kembali kode adalah GoodThing ™
Kent Fredric
2
Perhatikan bahwa, seperti yang juga dinyatakan dalam dokumentasi jQuery API, delay () seharusnya hanya digunakan untuk hal-hal yang berhubungan dengan antrian efek. Jika Anda memerlukan waktu tunggu untuk hal lain, setTimeout () masih merupakan cara yang tepat.
scy
Wow, terima kasih untuk tautannya @bottlenecked, saya rasa alasan contoh saya sangat mirip dengan fitur baru yang ditambahkan ke jQuery adalah karena ada rantai pengaruh penting dari jawaban ini ke bugs.jquery.com/ticket/4102 = P
Kent Fredric
23

Saya baru saja menemukannya di bawah ini:

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

Saya akan menyimpan postingan untuk pengguna lain!

Coughlin
sumber
14

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');
Arash Milani
sumber
11

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.

strager
sumber
5

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');
pengguna128026
sumber
1

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/

DaveAlger
sumber