什麼是jQuery中的隊列?jquery


Answers

要了解隊列方法,您必須了解jQuery如何進行動畫。 如果您一個接一個地編寫多個動畫方法調用,則jQuery將創建一個“內部”隊列,並向其添加這些方法調用。 然後它逐個運行這些動畫電話。

考慮以下代碼。

function nonStopAnimation()
{
    //These multiple animate calls are queued to run one after
    //the other by jQuery.
    //This is the reason that nonStopAnimation method will return immeidately
    //after queuing these calls. 
    $('#box').animate({ left: '+=500'}, 4000);
    $('#box').animate({ top: '+=500'}, 4000);
    $('#box').animate({ left: '-=500'}, 4000);

    //By calling the same function at the end of last animation, we can
    //create non stop animation. 
    $('#box').animate({ top: '-=500'}, 4000 , nonStopAnimation);
}

'queue'/'dequeue'方法可以控制這個'動畫隊列'。

默認情況下,動畫隊列名為'fx'。 我已經創建了一個示例頁面,其中有各種示例,它將說明如何使用隊列方法。

http://jsbin.com/zoluge/1/edit?html,output

以上樣本頁碼:

$(document).ready(function() {
    $('#nonStopAnimation').click(nonStopAnimation);

    $('#stopAnimationQueue').click(function() {
        //By default all animation for particular 'selector'
        //are queued in queue named 'fx'.
        //By clearning that queue, you can stop the animation.
        $('#box').queue('fx', []);
    });

    $('#addAnimation').click(function() {
        $('#box').queue(function() {
            $(this).animate({ height : '-=25'}, 2000);
            //De-queue our newly queued function so that queues
            //can keep running.
            $(this).dequeue();
        });
    });

    $('#stopAnimation').click(function() {
        $('#box').stop();
    });

    setInterval(function() {
        $('#currentQueueLength').html(
         'Current Animation Queue Length for #box ' + 
          $('#box').queue('fx').length
        );
    }, 2000);
});

function nonStopAnimation()
{
    //These multiple animate calls are queued to run one after
    //the other by jQuery.
    $('#box').animate({ left: '+=500'}, 4000);
    $('#box').animate({ top: '+=500'}, 4000);
    $('#box').animate({ left: '-=500'}, 4000);
    $('#box').animate({ top: '-=500'}, 4000, nonStopAnimation);
}

現在你可以問,為什麼要打擾這個隊列? 通常,你不會。 但是,如果您有一個要控制的複雜的動畫序列,則隊列/出隊方法是您的朋友。

還可以在jQuery組上看到關於創建複雜動畫序列的這個有趣的對話。

http://groups.google.com/group/jquery-en/browse_thread/thread/b398ad505a9b0512/f4f3e841eab5f5a2?lnk=gst

動畫演示:

http://www.exfer.net/test/jquery/tabslide/

讓我知道如果你還有問題。

Question

我發現jQuery.com文件在queue() / dequeue()上太簡單了。 什麼是jQuery中的隊列? 我該怎麼用?




它允許您排隊動畫...例如,而不是這樣

$('#my-element').animate( { opacity: 0.2, width: '100px' }, 2000);

它使元素消失,同時使寬度為100像素。 使用隊列可以讓你進行動畫的播放。 所以一個完成了另一個。

$("#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();

來自http://docs.jquery.com/Effects/queue的示例




函數makeRedmakeBlack使用queuedequeue執行對方。 效果是,'#wow'元素持續閃爍。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $('#wow').click(function(){
            $(this).delay(200).queue(makeRed);
            });
          });

      function makeRed(){
        $('#wow').css('color', 'red');
        $('#wow').delay(200).queue(makeBlack);
        $('#wow').dequeue();
      }

      function makeBlack(){
        $('#wow').css('color', 'black');
        $('#wow').delay(200).queue(makeRed);
        $('#wow').dequeue();
      }
    </script>
  </head>
  <body>
    <div id="wow"><p>wow</p></div>
  </body>
</html>