js STUDIO

.queue()

要素で実行されるキューの関数を表示します。

.queue( [queueName] ) 1.2追加

戻り値:Array

マッチした要素上で実行される関数のキューを参照します。

引数 説明
queueName キュー名を指定します。初期値は'fx'です。

.queue( [queueName], newQueue ) 1.2追加

戻り値:jQuery

マッチした要素上で実行する関数のキューを指定します。

引数 説明
queueName キュー名を指定します。初期値は'fx'です。
newQueue 現在のキューの内容を置換する関数の配列です。
下記の2つは同じように評価されます。
.queue()によって関数を追加する場合、次のキューに進めるには.dequeue()を呼び出す必要があることに注意してください。 
$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});

$('#foo').slideUp(function() {
  alert('Animation complete.');
});

.queue( [queueName], callback( next ) ) 1.2追加

戻り値:jQuery

マッチした要素上で実行する関数のキューを指定します。

引数 説明
queueName キュー名を指定します。初期値は'fx'です。
callback( next ) 関数を指定するとキューに追加され、次のキューは自動的に削除されますが、next引数として保持することが出来ます。 
$("#test").queue(function(next) {
    // Do some stuff...
    next();
});

デモ

登録されているキューの数を表示します。

<!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 src="http://code.jquery.com/jquery-latest.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>

<!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; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  Click here...
  <div></div>
<script>$(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });</script>

</body>
</html>

<!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; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
<script>$("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
    });</script>

</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM