jQuery

インスタンス;イベント;パフォーマンス;モバイル;ベーシック

キュー

UK[kju:] US [kju]

n. (人や車両など) queue, queue; braid

vi. (人や車両など) queue up and wait

vt. ( make) 列に並んで待っています

jquery jQuery.queue()方法 構文

関数: queue() メソッドは、一致する要素で実行される関数キューを表示または操作します。これは低レベルのメソッドであるため、.queue() を使用する方が便利です。

構文: .queue(queueName)

パラメータ:

パラメータ説明
キュー名オプション。シーケンスの名前を含む文字列値。デフォルトは fx (標準エフェクト シーケンス) です。

操作キュー: queue() メソッドは、一致する要素で実行される関数キューを操作します。

構文: .queue(queueName,newQueue)

##パラメータ:

パラメータ説明キュー名 オプション。シーケンスの名前を含む文字列値。デフォルトは fx (標準エフェクト シーケンス) です。

注: 各要素には、jQuery によって追加された 1 つ以上の関数キューを含めることができます。ほとんどのアプリケーションでは、キュー (fx という名前) が 1 つだけ使用されます。キューは非同期的に実行され、プログラムの実行を終了せずに要素に対する一連のアクションを呼び出します。典型的な例は、要素に対して複数のアニメーション メソッドを呼び出すことです。

jquery jQuery.queue()方法 例

<!DOCTYPE html>
<html>
<head>
  <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 type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

<p>队列长度是:<span></span></p>
<div></div>

<script>
var div = $("div");

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

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

runIt();
showIt();
</script>

</body>
</html>
インスタンスの実行 »

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します