【jQuery】『stop()』 がとっても優秀なので、色々いじってみた。

Pocket
LINEで送る

jQueryの『animate』を利用して動的な動きを付けたとき、「勝手に繰り返し動いてしまう。。」という経験ありませんか?

これは『animate』のイベントが完了する前に次のイベントが発生してしまい、『animate』のイベントが完了後に動作するからです。

今回は、そういったときに『animate』の完了を待たずに次のイベントを実行できる『stop』をご紹介します。

『stop』とは

指定した要素集合から、現在動作中のアニメーション処理を全て中止します。
他のアニメーションがqueueに入ってる場合、次のアニメーションが直ちに実行されることになります。
【出典:stop() – jQuery 日本語リファレンス・http://semooh.jp/jquery/api/effects/stop/_/・2015/11/22】

つまり、stopを入れるだけで下記のことが簡単にできてしまうのです。

  • jsのAnimationを停止させる事ができる
  • 強制的にAnimationを最後まで飛ばせる
  • 別のAnimationを即座に稼働させられる

記述方法

.stop( [queue] [, clearQueue] [, jumpToEnd] ) // 1.7追加
// [queue]  停止するアニメーションのキュー名を指定します。
// [clearQueue]   Boolean値で、キューアニメーションを削除するかどうかを指定します。初期値はfalseです。
// [jumpToEnd] Boolean値で、現アニメーションを即座に完了するかどうかを指定します。初期値はfalseです。

【参考:.stop() | jQuery 1.9 日本語リファレンス | js STUDIO】

それでは、ココからはいくつかのデモと一緒に『stop』の実例を見ていきましょう。

『stop』の実例集

今回、下記の様なjsファイルを用意して、htmlの<button onClick=”関数名”>にて関数を実行しています。

function stopEle(target,clearQueue,jumpToEnd){ // onClick="stopEle()"の処理内容です。
   $('#'+target).stop(clearQueue,jumpToEnd); // こっちがキモです。
}
function moveEle(target,dire){ // onClick="moveEle()"の処理内容です。
var pos;
if(dire == 'left'){
      pos = '-=10%';
   }else{
      pos = '+=10%';
}
   $('#'+target).animate({left:pos},2000);
}

基本的にコピペでどなたでも活用できるようになっていますので、ぜひお使いください。

『stop』によるアクティブなQueueの停止

<p>
   <button onClick="moveEle('aBox','left')">left</button>
   <button onClick="stopEle('aBox',false,false)">stop</button>
   <button onClick="moveEle('aBox','right')">right</button>
</p>
<div>
   <p id="aBox"></p>
</div>

左右のボタンを複数回クリックして、stopを押してみてください。

稼働中のAnimationしか停止できないのがわかるかと思います。デフォルトの状態では、複数回溜まったQueueは削除されず残るため、アクティブなAnimationだけ停止され、残ったQueueが実行されます。

『stop』によりQueueを全て削除

<p>
   <button onClick="moveEle('aBox','left')">left</button>
   <button onClick="stopEle('aBox',true,false)">stop</button>
   <button onClick="moveEle('aBox','right')">right</button>
</p>
<div>
   <p id="aBox"></p>
</div>

左右のボタンを複数回クリックして、stopを押してみてください。

stopを押したタイミングで、それ以降のQueueも全て削除され動作が完全に停止されたのがわかるかと思います。このように『clearQueue』をtrueにすることで以降のQueueの削除が行えます。

『stop』によるアクティブなQueueの停止

<p>
   <button onClick="moveEle('aBox','left')">left</button>
   <button onClick="stopEle('aBox',false,true)">stop</button>
   <button onClick="moveEle('aBox','right')">right</button>
</p>
<div>
   <p id="aBox"></p>
</div>

左右のボタンを複数回クリックして、stopを押してみてください。

stopを押した瞬間に、Animationが着地する地点(動作が完了した状態)までスキップされたのがわかるかと思います。『jumpToEnd』をtrueにするとstopで停止されたときにAnimationの最後のフレームまでスキップされます。

おわりに

いかがでしたでしょうか。既にstopメソッドを利用されている方もいると思いますが、引数を理解するとさらに活用範囲が深まりそうですね。

SNSでもご購読できます。