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, मानक प्रभाव श्रृंखला है।

विस्तृत वर्णन

प्रत्येक एलीमेंट को एक या अधिक जेक्वेरी द्वारा जोड़ी गई फ़ंक्शन क्वीउइन हो सकती है। अधिकांश अनुप्रयोगों में केवल एक क्वीउइन (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 डाटा रेफरेंस मैनुअल