當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

JQuery .queue()用法及代碼示例

顯示或操作要在匹配元素上執行的函數隊列。

用法一

.queue(  [queueName ] ) => Array

說明：顯示要在匹配元素上執行的函數隊列。

  • 添加的版本：1.2.queue( [queueName ] )

    • queueName
      類型：String
      包含隊列名稱的字符串。默認為 fx ，標準效果隊列。

例子：

顯示隊列的長度。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 60px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  p {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>The queue length is: <span></span></p>
<div></div>
 
<script>
var div = $( "div" );
 
function runIt() {
  div
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( "fast" )
    .animate({ left: "-=200" }, 1500 )
    .hide( "slow" )
    .show( 1200 )
    .slideUp( "normal", runIt );
}
 
function showIt() {
  var n = div.queue( "fx" );
  $( "span" ).text( n.length );
  setTimeout( showIt, 100 );
}
 
runIt();
showIt();
</script>
 
</body>
</html>

演示：

用法二

.queue(  [queueName ], newQueue ) => jQuery

說明：操作要執行的函數隊列，對每個匹配的元素執行一次。

  • 添加的版本：1.2.queue( [queueName ], newQueue )

    • queueName
      類型：String
      包含隊列名稱的字符串。默認為 fx ，標準效果隊列。
    • newQueue
      類型：Array
      用於替換當前隊列內容的函數數組。

  • 添加的版本：1.2.queue( [queueName ], callback )

    • queueName
      類型：String
      包含隊列名稱的字符串。默認為 fx ，標準效果隊列。
    • callback
      類型：Function(Functionnext())
      添加到隊列中的新函數，調用的函數將使下一個項目出列。

每個元素都可以通過 jQuery 附加一對多的函數隊列。在大多數應用程序中，隻使用一個隊列(稱為 fx )。隊列允許在元素上異步調用一係列操作，而不會停止程序執行。典型的例子是在一個元素上調用多個動畫方法。例如：

$( "#foo" ).slideUp().fadeIn();

執行此語句時，元素立即開始其滑動動畫，但淡入淡出的過渡被放置在fx 隊列中，隻有在滑動過渡完成後才被調用。

.queue() 方法允許我們直接操作這個函數隊列。使用回調調用.queue() 特別有用；它允許我們在隊列末尾放置一個新函數。回調函數對 jQuery 集中的每個元素執行一次。

此函數類似於提供帶有動畫方法的回調函數，但不需要在執行動畫時給出回調。

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

例子：

排隊一個自定義函數。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Click here...
<div></div>
 
<script>
$( document.body ).click(function() {
  $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 )
    .queue(function() {
      $( this ).addClass( "newcolor" ).dequeue();
    })
    .animate({ left: "-=200" }, 500 )
    .queue(function() {
      $( this ).removeClass( "newcolor" ).dequeue();
    })
    .slideUp();
});
</script>
 
</body>
</html>

演示：

設置一個隊列數組來刪除隊列。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
 
<script>
$( "#start" ).click(function() {
  $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 5000 )
    .queue(function() {
      $( this ).addClass( "newcolor" ).dequeue();
    })
    .animate({ left: '-=200' }, 1500 )
    .queue(function() {
      $( this ).removeClass( "newcolor" ).dequeue();
    })
    .slideUp();
});
$( "#stop" ).click(function() {
  $( "div" )
    .queue( "fx", [] )
    .stop();
});
</script>
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .queue()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。