jQuery بيانات - طريقة jQuery.queue()

كتيب مرجع بيانات jQuery

مثال

أظهر طول السلسلة:

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.');
);

لاحظ أننا يجب أن نتأكد من تنفيذ .dequeue() عند إضافة وظيفة من خلال .queue()، حتى يتم تنفيذ الوظيفة التالية في الصف.

مثال 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