jQuery دیتا - queue() طریق

مثال

کوئئک کی لمبائی دکھائیں:

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

آپ خود کی جانب سے کوشش کریں