当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。