Metode queue

Metode queue memungkinkan kita bekerja dengan antrian fungsi yang terikat pada elemen. Lihat juga metode clearQueue, yang memungkinkan kita menghapus dari antrian semua fungsi yang belum dijalankan.

Sintaks

Beginilah cara kita menampilkan antrian fungsi yang dijalankan, yang terikat pada elemen. Kita dapat meneruskan parameter opsional nama antrian dalam bentuk string (defaultnya fx - antrian efek standar):

.queue([nama antrian]);

Kita dapat memanipulasi antrian. Dieksekusi sekali untuk setiap elemen. Untuk ini, kita dapat meneruskan parameter kedua berupa array fungsi, yang akan menggantikan isi antrian saat ini:

.queue([nama antrian], antrian baru );

Atau kita dapat meneruskan parameter kedua berupa callback-fungsi baru untuk ditambahkan ke antrian. Fungsi ini pada gilirannya menerima fungsi lain sebagai parameternya. Ini memungkinkan untuk secara otomatis menghapus item berikutnya dari antrian dan memajukan antrian:

.queue([nama antrian], callback-fungsi(next) {
	next();
});

Setiap elemen dapat memiliki satu atau beberapa antrian. Dalam banyak aplikasi, hanya digunakan satu (fx). Antrian memungkinkan pelaksanaan urutan tindakan dengan elemen secara asinkron, tanpa mengganggu eksekusi program. Pemanggilan queue dengan callback-fungsi memungkinkan kita menempatkan fungsi baru di akhir antrian. callback-fungsi dieksekusi sekali untuk setiap elemen dalam set. Saat menambahkan fungsi menggunakan queue, kita harus memastikan bahwa nantinya metode dequeue akan dipanggil, agar fungsi berikutnya dalam rantai dapat bekerja.

Contoh

Mari tambahkan fungsi kustom. Pertama, setelah mengklik #animate, kita akan menampilkan kotak merah, yang akan bergerak ke kanan selama 2s, kemudian dengan menggunakan queue kita akan menambahkan fungsi kustom, yang akan mengubah warna kotak menjadi hijau, dengan menambahkan kelas newcolor. Seperti yang Anda lihat, kemudian di sini dipanggil dequeue, untuk menghapus fungsi dari antrian. Kemudian kotak kita akan bergerak ke kiri setengah detik dan akan berubah warna kembali menjadi merah - dengan bantuan fungsi kustom kedua kita menghapus kelas newcolor. Di akhir animasi kita menutup kotak kita:

<button id="animate">start</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}

div.newcolor {
	background: green;
}

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

Contoh

Mari tambahkan antrian dalam bentuk array, untuk menghapus yang sebelumnya. Saat tombol #start ditekan kita akan melihat animasi dari contoh sebelumnya. Saat tombol #stop ditekan, kita akan menghentikan animasi dengan menambahkan array kosong. Saat menekan #start lagi, animasi akan mulai dari awal:

<button id="start">start</button>
<button id="stop">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() {
	$('div')
		.show('slow')
		.animate({left: '+=200'}, 5000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 1500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});
	
$('#stop').click(function() {
	$('div').queue('fx', []).stop();
});

Lihat juga

metode animate,
yang menganimasikan properti elemen
metode clearQueue,
yang memungkinkan menghapus semua item yang belum dieksekusi dari antrian fungsi
metode dequeue,
yang memungkinkan mengeksekusi fungsi berikutnya dalam antrian fungsi