【Javascript】アニメーションの一時停止と再生を超簡単に実装するプラグイン[jquery.pause.js]

jQueryによるアニメーションを途中で一時停止させる方法を探していたところ、jquery.pause.jsという素晴らしいプラグインを発見しました。
ものすごく簡単にアニメーションの一時停止と再開を実装することができます。簡単すぎてびっくりしました。

自力で実装しようとして残り時間や残り移動距離を計算するために「速さ＝距離/時間」という懐かしい計算式を調べたりしてました。

ADs

jQueryとjquery.pause.jsを読み込みます。

1 2	<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="jquery.pause.js"></script>

アニメーションが実行されているオブジェクトに対して、pause()というメソッドを渡せば停止することが出来ます。
再開させる場合はresume()です。

//jquery.pause.jsによる停止と再生処理。

//ここではclickにしていますが、mouseenter/mouseleaveにバインドすることもできます。

$('#pause').on('click',function(){

$('.item').pause();

});

$('#resume').on('click',function(){

$('.item').resume();

});

以前作ったInfinite Slideというプラグインにも使用し、マウスオーバーでアニメーションが停止できるようにしてみましたので、よろしければご利用ください。

ADs

コメントはまだありません。

【Javascript】アニメーションの一時停止と再生を超簡単に実装するプラグイン[jquery.pause.js] | Wood-Roots:blog