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』の実例を見ていきましょう。
『stop』の実例集
今回、下記の様なjsファイルを用意して、htmlの<button onClick=”関数名”>にて関数を実行しています。
jQuery
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の停止
html
<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を全て削除
html
<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の停止
html
<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メソッドを利用されている方もいると思いますが、引数を理解するとさらに活用範囲が深まりそうですね。