jQuery data - metode queue()

Panduan Referensi Data jQuery

Contoh

Tampilkan panjang antrian:

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

Coba sendiri

Definisi dan penggunaan

queue() metode menampilkan atau mengoperasikan antrian fungsi yang dieksekusi di atas elemen yang cocok.

Sintaks

.queue(queueName)
Parameter Deskripsi
queueName Pilihan. Nilai string yang mengandung nama urutan. Default adalah fx, urutan efek standar.

Operasikan antrian

queue() metode operasikan antrian fungsi yang dieksekusi di atas elemen yang cocok.

Sintaks

.queue(queueName,newQueue)
Parameter Deskripsi
queueName Pilihan. Nilai string yang mengandung nama urutan. Default adalah fx, urutan efek standar.

Penjelasan detil

Setiap elemen dapat memiliki satu hingga beberapa antrian fungsi yang ditambahkan oleh jQuery. Pada sebagian besar aplikasi, hanya menggunakan antrian satu (dengan nama fx). Antrian menjalankan urutan aksi secara asinkron di atas elemen, tanpa menghentikan eksekusi program. Contoh yang biasa adalah pemanggilan beberapa metode animasi di atas elemen. Contohnya:

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

Ketika pernyataan ini dijalankan, elemen akan segera mulai animasi geser, tetapi transisi pencahayaan ditempatkan di antrian fx, dan hanya akan dipanggil setelah transisi geser selesai.

Metode .queue() memungkinkan kami untuk melakukan operasi langsung terhadap antrian fungsi ini. Penggunaan metode .queue() dengan callback sangat berguna; ini memungkinkan kami untuk menempatkan fungsi baru di ujung antrian.

Fitur ini mirip dengan fungsi callback yang disediakan oleh metode animasi, tetapi tidak perlu mengatur callback saat animasi dijalankan.

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

Sama dengan:

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

Perhatikan, ketika menambahkan fungsi melalui .queue(), kami harus memastikan bahwa akhirnya dipanggil .dequeue(), agar fungsi berikutnya dalam antrian dapat dijalankan.

Contoh 1

Lakukan operasi antrian untuk fungsi khusus:

$("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();
);

Coba sendiri

Contoh 2

Atur daftar urutan untuk menghapus antrian:

$("#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();
);

Coba sendiri

Panduan Referensi Data jQuery