jQuery داده - روش jQuery.queue()
مثال
طول توالی را نمایش میدهد:
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(); );