• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • jQuery.queue()

    显示或操作匹配的元素上已经执行的函数列队。

    jQuery.queue(element[, queueName ])
    • jQuery.queue(element[, queueName ])
    jQuery.queue(element, queueName, newQueue)
    • jQuery.queue(element, queueName, newQueue)
    • jQuery.queue(element, queueName, callback())

    jQuery.queue(element[, queueName ])

    显示在匹配的元素上的已经执行的函数列队。

    jQuery.queue(element[, queueName ])
    • element类型: Element。一个用于检查附加列队的DOM元素。
    • queueName类型: String。一个含有队列名的字符串。默认是fx,标准的动画队列。

    注意:这是一个底层的方法,你应该用.queue()代替。

    例子

    显示列队的长度。

    <!DOCTYPE html>
    <html>
    <head>
      <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>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <button id="show">Show Length of Queue</button>
      <span></span>
      <div></div>
     
    <script>
      $("#show").click(function () {
        var n = jQuery.queue( $("div")[0], "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>
     
    </body>
    </html>
    

    jQuery.queue(element, queueName, newQueue)

    操作匹配元素上将要执行的函数队列。

    jQuery.queue(element, queueName, newQueue)
    • element类型: Element。一个已附加列队函数数组的DOM元素。
    • queueName类型: String。一个含有队列名的字符串。默认是fx,标准的动画队列。
    • newQueue类型: Array。一个替换当前函数列队内容的数组。

    注意:这是一个底层的方法,你应该用.queue()代替。

    每个元素可以通过jQuery附加一个或多个函数队列。在大多数程序中,只有一个列队(名为fx)被使用。队列允许一个元素来异步的访问一连串的操作,而不终止整个程序执行。

    jQuery.queue()方法允许我们直接操纵这个函数队列。最常用的用法是调用jQuery.queue()时带一个回调函数,这样就能让我们在队列最后的添加一个新的函数。

    值得注意的是,当使用jQuery.queue()添加一个函数的时候,务必确保在函数的最后调用了jQuery.dequeue(),以便能够执行队列中的下一个函数。

    例子:

    将一个自定义函数加入到队列中。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
    div { margin:3px; width:40px; height:40px;
          position:absolute; left:10px; top:30px;
          background:green; display:none; }
    div.newcolor { background:blue; }
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      Click here...
      <div></div>
     
    <script>
     $(document.body).click(function () {
        $("div").show("slow");
        $("div").animate({left:'+=200'},2000);
        jQuery.queue( $("div")[0], "fx", function () {
          $(this).addClass("newcolor");
          jQuery.dequeue( this );
        });
        $("div").animate({left:'-=200'},500);
        jQuery.queue( $("div")[0], "fx", function () {
          $(this).removeClass("newcolor");
          jQuery.dequeue( this );
        });
        $("div").slideUp();
      });</script>
     
    </body>
    </html>
    

    Click here...