queue()

תוכן:

queue( [ queueName ] )
- .queue( [ queueName ] )
queue( [ queueName ], newQueue )
- .queue( [ queueName ], newQueue )
- .queue( [ queueName ], callback( next ) )

.queue( [ queueName ] )

מחזירה: מערך

תיאור: מציג תור של פונקציות, שצריכות להתבצע על אלמנטים בהתאמה.

ארגומנטים

.queue( [ queueName ] )

הוספה בגרסה: 1.2

queueName

מחרוזת

מחרוזת שמכילה שם של התור. בברירת מחדל fx, תור של אפקטים סטנדרטים.

דוגמה

מציג אורך של התור.

    $("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
    });
    function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
    }
    runIt();

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
    });
    function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
    }
    runIt();
  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <button id="show">Show Length of Queue</button>
  <span></span>
  <div></div>
</body>
</html>

נסה זאת בעצמך

.queue( [ queueName ], newQueue )

מחזירה: jQuery

תיאור: מתפעל את תור של פונקציות להיות מופעלות על אלמנטים בהתאמה.

ארגומנטים

.queue( [ queueName ], newQueue )

הוספה בגרסה: 1.2

queueName

מחרוזת

מחרוזת שמכילה שם של התור. ברירת מחדל היא fx, אפקטים של תור סטנדרטיים.

newQueue

מערך

מערך של פונקציות להחלפת תוכן של תור הנוכחי.

.queue( [ queueName ], callback( next ) )

הוספה בגרסה: 1.2

queueName

מחרוזת

מחרוזת שמכילה שם של התור. ברירת מחדל היא fx, אפקטים של תור סטנדרטיים.

callback( next )

Callback

פונקציה חדשה עבור הוספה לתור, יחד עם פונקציה להפעלה היא מבטלת פריט הבא.

כל אלמנט יכול להכיל מאחד עד מספר רב של פונקציות המצורפות אליו באמצעות 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() תתבצע בהתאם בסוף.

ב- jQuery 1.4 פונקציה, שמופעלת באמצעות העברה לפונקציה אחרת כארגומנט ראשון, כשה נקרא מעביר תור אוטומטי לסאיף הבא. אתם יכולים להשתמש בדרך הבאה:

$("#test").queue(function(next) {
    // Do some stuff...
    next();
});

דוגמאות

דוגמה 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();
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
 $(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();
    });
  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
</head>
<body>
  Click here...
  <div></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 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();
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("#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();
    });
  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

queue()

.queue( [ queueName ] )

ארגומנטים

.queue( [ queueName ] )

דוגמה

.queue( [ queueName ], newQueue )

ארגומנטים

.queue( [ queueName ], newQueue )

.queue( [ queueName ], callback( next ) )

דוגמאות

דוגמה 1

דוגמה 2

תגובות