ฉันกำลังพยายามให้องค์ประกอบจางหายไป จากนั้นใน 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');
น่าเศร้า คุณไม่สามารถทำเพียงแค่ .animate({}, 2000) -- ฉันคิดว่านี่เป็นจุดบกพร่อง และจะรายงานมัน
Ben Alman เขียนปลั๊กอินแสนหวานสำหรับ jQuery ชื่อ doTimeout มันมีคุณสมบัติที่ดีมากมาย!
ลองดูที่นี่: jQuery doTimeout: ชอบ setTimeout แต่ดีกว่า.
เพื่อให้สามารถใช้งานได้เช่นนั้น คุณต้องส่งคืน this หากไม่มีการส่งคืน fadeOut('slow') จะไม่ได้รับวัตถุเพื่อดำเนินการนั้น
I.e.:
$.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);
});
ดูซอด้านล่างสำหรับตัวอย่างการทำงาน...
