jQuery ข้อมูล - jQuery.queue() วิธี

jQuery คู่มือข้อมูลข้อมูล

ตัวอย่าง

แสดงความยาวของลิสต์

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

ทดลองด้วยตัวเอง

คำนิยามและวิธีใช้

queue() วิธีแสดงหรือปฏิบัติการลิสต์ฟังก์ชันที่ปฏิบัติการบนองค์ประกอบที่ตรงกันข้าม

หมายเหตุ：นี่เป็นวิธีระดับเดิม ใช้ .queue() ง่ายต่อการใช้งานมากขึ้น

การใช้งาน

.queue(queueName)
ประกาศ รายละเอียด
queueName ตัวเลือก มีค่าเป็นตัวอักษร รวมถึงชื่อลิสต์ โดยเริ่มต้นค่าเป็น fx ตามมาตราฐานของลิสต์ฤทธิ์

ปฏิบัติการลิสต์

queue() วิธีสำหรับปฏิบัติการลิสต์ฟังก์ชันที่ปฏิบัติการบนองค์ประกอบที่ตรงกันข้าม

การใช้งาน

.queue(queueName,newQueue)
ประกาศ รายละเอียด
queueName ตัวเลือก มีค่าเป็นตัวอักษร รวมถึงชื่อลิสต์ โดยเริ่มต้นค่าเป็น fx ตามมาตราฐานของลิสต์ฤทธิ์

รายละเอียด

แต่ละองค์ประกอบสามารถมีลิสต์ฟังก์ชันที่เพิ่มโดย jQuery หนึ่งถึงหลายชิ้น ในโปรแกรมส่วนใหญ่ใช้ลิสต์หนึ่งเท่านั้น (ชื่อ fx) ลิสต์ปฏิบัติการปฏิบัติการระบบที่ไม่หยุดการปฏิบัติการของโปรแกรม ตัวอย่างที่นิยมใช้คือ การเรียกหลายเมธอดแอนิเมชันบนองค์ประกอบต่างๆ ตัวอย่างเช่น：

$('#foo').slideUp().fadeIn();

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

วิธี .queue() อนุญาตให้เราทำงานกับความยืดยาวของฟังก์ชันโดยตรง

คุณสมบัตินี้คล้ายกับการให้คำเตือนภัยฟังก์ชันที่มีการทำงานตอนเริ่มต้นแบบจำลอง แต่ไม่จำเป็นต้องตั้งค่าฟังก์ชันที่ทำงานตอนเริ่มต้นแบบจำลอง

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $("this").dequeue();
});;

เหมือนกันกับ

$('#foo').slideUp(function() {
  alert('Animation complete.');
);

โปรดจำเป็นต้องทราบว่า เมื่อเพิ่มฟังก์ชันด้วย .queue() ต้องทำให้ .dequeue() ทำงานเพื่อให้ฟังก์ชันที่ต่อไปในลำดับสามารถทำงานได้

ตัวอย่าง 1

ทำการจัดลำดับสำหรับฟังก์ชันที่กำหนด

$("document.body").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $("this").addClass("newcolor");
    $("this").dequeue();
  });;
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $("this").removeClass("newcolor");
    $("this").dequeue();
  });;
  $("div").slideUp();
);

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ตั้งค่าแบบจำลองของความยืดยาวเพื่อลบความยืดยาว

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $("this").addClass("newcolor");
    $("this").dequeue();
  );
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $("this").removeClass("newcolor");
    $("this").dequeue();
  );
  $("div").slideUp();
);
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
);

ทดลองด้วยตัวเอง

jQuery คู่มือข้อมูลข้อมูล