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() ອະນຸຍາດໃຫ້ພວກເຮົາປະຕິບັດກັບລະບົບຄັນຫຼັກພາຍໃນ. ການເອິ້ນ .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