วิธีการ clearQueue
วิธีการ clearQueue ช่วยให้เราสามารถลบฟังก์ชันทั้งหมดที่ยังไม่ได้เริ่มทำงานออกจากคิว
ไวยากรณ์
นี่คือวิธีที่เราสามารถล้างคิวของฟังก์ชัน สามารถส่งชื่อคิวเป็นพารามิเตอร์เสริมได้ในรูปแบบสตริง (ค่าเริ่มต้นคือ fx - คิวเอฟเฟกต์มาตรฐาน) หากไม่ส่งพารามิเตอร์ใดๆ ฟังก์ชันที่เหลือทั้งหมดจะถูกลบออกจากคิว fx:
.clearQueue([ชื่อคิว]);
วิธีการนี้คล้ายคลึงกับวิธี stop แต่ในขณะที่วิธีหลังสามารถทำงานได้เฉพาะกับภาพเคลื่อนไหวเท่านั้น วิธี clearQueue ช่วยให้ทำงานกับคิว jQuery ใดๆ ที่เพิ่มเข้ามาด้วยวิธี queue ได้
ตัวอย่าง
เมื่อคลิกที่ปุ่ม #start เราจะเริ่มภาพเคลื่อนไหว เมื่อคลิกที่ปุ่ม #stop เราจะหยุดภาพเคลื่อนไหวและล้างคิวโดยใช้วิธี clearQueue เมื่อคลิกที่ #start อีกครั้ง ภาพเคลื่อนไหวจะเริ่มต้นใหม่:
<button id="start">เริ่มต้น</button>
<button id="stop">หยุด</button>
<div></div>
div {
position: absolute;
margin: 3px;
width: 50px;
height: 50px;
left: 0px;
top: 30px;
background: red;
display: none;
}
div.newcolor {
background: green;
}
$('#start').click(function() {
let myDiv = $('div');
myDiv.show('slow');
myDiv.animate({
left: '+=200'
}, 5000);
myDiv.queue(function() {
let that = $(this);
that.addClass('newcolor');
that.dequeue();
});
myDiv.animate({
left: '-=200'
}, 1500);
myDiv.queue(function() {
let that = $(this);
that.removeClass('newcolor');
that.dequeue();
});
myDiv.slideUp();
});
$('#stop').click(function() {
let myDiv = $('div');
myDiv.clearQueue();
myDiv.stop();
});
