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

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

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

用法一

jQuery.queue( element [, queueName ] ) => Array

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

  • 添加的版本：1.3jQuery.queue( element [, queueName ] )

    • element
      類型：Element
      用於檢查附加隊列的 DOM 元素。
    • queueName
      類型：String
      包含隊列名稱的字符串。默認為 fx ，標準效果隊列。

注意：這是一種低級方法，您可能應該使用.queue()反而。

例子：

顯示隊列的長度。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.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;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/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" )
    .animate({
      left: "+=200"
    }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( "fast" )
    .animate({
      left: "-=200"
    }, 1500 )
    .hide( "slow" )
    .show( 1200 )
    .slideUp( "normal", runIt );
}
 
runIt();
</script>
 
</body>
</html>

演示：

用法二

jQuery.queue( element, queueName, newQueue ) => Array

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

  • 添加的版本：1.3jQuery.queue( element, queueName, newQueue )

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

  • 添加的版本：1.3jQuery.queue( element, queueName, callback )

    • element
      類型：Element
      要在其上添加排隊函數的 DOM 元素。
    • queueName
      類型：String
      包含隊列名稱的字符串。默認為 fx ，標準效果隊列。
    • callback
      類型：Function ()
      添加到隊列中的新函數。

注意：這是一種低級方法，您可能應該使用.queue()反而。

每個元素都可以通過 jQuery 附加一個或多個函數隊列。在大多數應用程序中，隻使用一個隊列(稱為 fx )。隊列允許在元素上異步調用一係列操作，而不會停止程序執行。

jQuery.queue() 方法允許我們直接操作這個函數隊列。使用回調調用jQuery.queue() 特別有用；它允許我們在隊列末尾放置一個新函數。

請注意，當使用 jQuery.queue() 添加函數時，我們應確保最終調用 jQuery.dequeue() 以便執行行中的下一個函數。

例子：

排隊一個自定義函數。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.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() {
  var divs = $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).addClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.animate({ left: "-=200" }, 500 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).removeClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.slideUp();
});
</script>
 
</body>
</html>

演示：

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.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() {
  var divs = $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 5000 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).addClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.animate({ left: "-=200" }, 1500 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).removeClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.slideUp();
});
$( "#stop" ).click(function() {
  jQuery.queue( $( "div" )[ 0 ], "fx", [] );
  $( "div" ).stop();
});
</script>
 
</body>
</html>

演示：

相關用法


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