jQuery ຂໍ້ມູນ - queue() ການກົດດັນ

ການອອກບົດບັນທຶກຂໍ້ມູນ jQuery

ຕົວຢ່າງ

ສະແດງຄວາມຍາວຂອງການກົດດັນ:

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

ທົດສອບດີຕະນາການ

ການອະທິບາຍແລະການນໍາໃຊ້

queue() ການສະແດງຫຼືການກົດດັນການກົດດັນທີ່ດຳເນີນຢູ່ເບື້ອງຫຼັກສັດທີ່ຕົກລົງ.

ຄຳສັບພາສາ

.queue(queueName)
ຄວາມບັນທຶກ ການອະທິບາຍ
queueName ຄວາມອະທິບາຍ. ຄວາມບັນທຶກວິທະຍັກ, ບັນປະໂຫຍດຊື່ຂອງການກົດດັນ. ຄົນສະເຫນີ: fx, ການກົດດັນສະຖານະພາບ.

ການກົດດັນການກົດດັນ

queue() ການກົດດັນການກົດດັນທີ່ດຳເນີນຢູ່ເບື້ອງຫຼັກສັດທີ່ຕົກລົງ.

ຄຳສັບພາສາ

.queue(queueName,newQueue)
ຄວາມບັນທຶກ ການອະທິບາຍ
queueName ຄວາມອະທິບາຍ. ຄວາມບັນທຶກວິທະຍັກ, ບັນປະໂຫຍດຊື່ຂອງການກົດດັນ. ຄົນສະເຫນີ: fx, ການກົດດັນສະຖານະພາບ.

ການອະທິບາຍລະອຽດ

ທຸກບັນດາຫຼັກສັດສາມາດມີຄວາມກະຈາຍຢູ່ບັນດາການກົດດັນທີ່ຕິດຕັ້ງໂດຍ jQuery. ໃນຫຼາຍເກມໃຊ້, ພຽງແຕ່ນາມການກົດດັນທີ່ຊື່ວ່າ fx. ການກົດດັນມັນຈະດຳເນີນຢູ່ເບື້ອງຫຼັກສັດບໍ່ຈະຢຸດການດຳເນີນຂອງໂຄງການ. ບົດສະວັດປະຈຸບັນວ່າການເກັບການກົດດັນຫຼາຍການສະແດງຕະຫຼອດຢູ່ເບື້ອງຫຼັກສັດ. ເປັນຕົວຢ່າງ:

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

ຄຳສັ່ງນີ້ຈະດຳເນີນວຽນອອກບົດບັນທຶກທັນທີ່ນັ້ນຫຼັງຈາກການດຳເນີນວຽນຫຼັງບົດບັນທຶກດຳເນີນວຽນກະຈາຍລົງມາ, ພຽງແຕ່ຫຼັງຈາກການດຳເນີນວຽນດຳເນີນວຽນກະຈາຍລົງມາຈະຈະດຳເນີນວຽນຫຼັງວຽນ.

ການໃຊ້ .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