เอฟเฟกต์ jQuery หมดเวลา

ฉันกำลังพยายามให้องค์ประกอบเลือนหายไปจากนั้นใน 5,000 มิลลิวินาทีก็จะเลือนหายไปอีกครั้ง ฉันรู้ว่าฉันสามารถทำสิ่งต่างๆเช่น:

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

แต่นั่นจะควบคุมการเลือนหายเท่านั้นฉันจะเพิ่มข้อมูลข้างต้นในการโทรกลับหรือไม่

อัปเดต:ณ jQuery 1.4 คุณสามารถใช้.delay( n )วิธีการ http://api.jquery.com/delay/

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

หมายเหตุ : $.show()และ$.hide()โดยค่าเริ่มต้นจะไม่อยู่ในคิวดังนั้นหากคุณต้องการใช้$.delay()กับพวกเขาคุณต้องกำหนดค่าด้วยวิธีนี้:

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

คุณอาจใช้ไวยากรณ์ Queue ซึ่งอาจใช้ได้:

jQuery(function($){ 

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

}); 

หรือคุณอาจจะมีความคิดสร้างสรรค์และสร้างฟังก์ชัน jQuery เพื่อทำมัน

(function($){ 

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

ซึ่ง (ในทางทฤษฎีทำงานกับหน่วยความจำที่นี่) อนุญาตให้คุณทำสิ่งนี้:

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

ฉันเพิ่งค้นพบด้านล่าง:

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

ฉันจะเก็บโพสต์ไว้ให้ผู้ใช้คนอื่น ๆ !

แฮ็คที่ยอดเยี่ยมโดย @strager นำไปใช้ใน jQuery ดังนี้:

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

จากนั้นใช้เป็น:

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

คุณสามารถทำสิ่งนี้:

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

น่าเศร้าที่คุณไม่สามารถทำได้เพียงแค่. เคลื่อนไหว ({}, 2000) - ฉันคิดว่านี่เป็นข้อบกพร่องและจะรายงานให้ทราบ

Ben Alman เขียนปลั๊กอินสำหรับ jQuery ชื่อ doTimeout มีคุณสมบัติที่ดีมากมาย!

ตรวจสอบออกที่นี่: jQuery doTimeout: ชอบ setTimeout แต่ดี

thisเพื่อให้สามารถใช้งานได้เช่นเดียวกับที่คุณจะต้องกลับมา หากไม่มีการส่งคืน fadeOut ('ช้า') จะไม่ได้รับวัตถุเพื่อดำเนินการดังกล่าว

ได้แก่ :

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

จากนั้นทำสิ่งนี้:

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

สามารถทำได้ด้วย 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);
});​

ดูซอด้านล่างสำหรับตัวอย่างการทำงาน ...

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