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

現在你可能會問,為什麼我要打擾這個隊列呢? 通常,你會習慣。 但是如果你想控制一個複雜的動畫序列,那麼queue / dequeue方法就是你的朋友。

另請參閱jQuery組關於創建複雜動畫序列的有趣對話。

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

動畫演示:

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

如果您仍然有疑問,請告訴我。

Question

我發現queue() / dequeue()上的jQuery.com文檔太簡單,難以理解。 jQuery中的隊列究竟是什麼? 我應該如何使用它們?




函數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>



它允許你排隊動畫...例如,而不是這個

$('#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示例