stop()メソッド

進行中のアニメーションを停止させる。途中まで動いているアニメーションがあった場合、一旦停止してからアニメーションを継続させるようにする。

$("セレクタ").stop([キュー] [, キューをクリア] [,最後までスキップ]);
  • キュー：停止したいアニメーションのキュー名を指定する
  • キューをクリア：キューのアニメーションを削除するかどうかをBoolean値で指定する。初期値はfalse
  • 最後までスキップ：現在のアニメーションをスキップするかどうかをBoolean値で指定する。初期値はfalse

現在のアニメーションを停止する場合

現在のアニメーションを停止する場合はstop()メソッドのパラメータのキューをクリアと最後までスキップのパラメータをどちらともfalseに指定する。

$(".btn2").click(function(){
  // box1クラスのアニメーションを停止する
  $(".box1").stop(false, false); //.stop()と同じ
});

現在のアニメーションを終了する場合

現在のアニメーションを終了する場合はstop()メソッドのパラメータのキューをクリアをfalse、最後までスキップをtrueに設定する。

$(".btn2").click(function(){
  // box1クラスのアニメーションを終了する
  $(".box1").stop(false, true);
});

キューをクリアする場合

キューをクリアする場合はstop()のパラメータにパラメータのキューをクリアをtrue、最後までスキップをfalseに設定する。

$(".btn1").click(function(){
  // box1クラスのアニメーションを設定する
  $(".box1").animate({
    /* 1つ目のアニメーション */
    .animate({
      /* 2つ目のアニメーション */
    });
  $(".btn2").click(function(){
    // box1クラスのアニメーションを停止する
    $(".box1").stop(true, false);
  });
});

btn1クラスのボタンを押すとアニメーションが始まるが、アニメーション中にbtn2クラスのボタンを押すとアニメーションが停止し、再びbtn1クラスを押すと、途中からのアニメーションが再開する。

キューをクリアしてアニメーションを停止する場合

キューをクリアしてアニメーションを停止する場合はstop()のパラメータのキューをクリアと最後までスキップのどちらもtrueに設定する。

$(".btn1").click(function(){
  // box1クラスのアニメーションを設定する
  $(".box1").animate({
    /* 1つ目のアニメーション */
    .animate({
      /* 2つ目のアニメーション */
    });
  $(".btn2").click(function(){
    // box1クラスのアニメーションを設定する
    $(".box1").stop(true, true);
  });
});

btn1クラスのボタンを押すと、アニメーションが開始され、アニメーション中にbtn2クラスのボタンを押すとアニメーションがスキップされて1つ目のアニメーションの最終的な状態になる。

inserted by FC2 system