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

عند تنفيذ هذا الجملة، يبدأ العنصر في تحريكه السلبي فورًا، ولكن يتم وضع الانتقال التدرجي في الصف 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