優秀なので、色々いじってみた。優秀なので、色々いじってみた。優秀なので、色々いじってみた。コメントはまだありませんjQueryの『animate』を利用して動的な動きを付けたとき、「勝手に繰り返し動いてしまう。」という経験ありませんか?これは『animate』のイベントが完了する前に次のイベントが発生してしまい、『animate』のイベントが完了後に動作するからです。今回は、そういったときに『animate』の完了を待たずに次のイベントを実行できる『stop』をご紹介します。『stop』によるアクティブなQueueの停止おわりに『stop』とは指定した要素集合から、現在動作中のアニメーション処理を全て中止します。他のアニメーションがqueueに入ってる場合、次のアニメーションが直ちに実行されることになります。日本語リファレンス・http://semooh.jp/jquery/api/effects/stop/_/・2015/11/22】つまり、stopを入れるだけで下記のことが簡単にできてしまうのです。停止するアニメーションのキュー名を指定します。Boolean値で、キューアニメーションを削除するかどうかを指定します。初期値はfalseです。Boolean値で、現アニメーションを即座に完了するかどうかを指定します。初期値はfalseです。STUDIO】それでは、ココからはいくつかのデモと一緒に『stop』の実例を見ていきましょう。onClick=”関数名”>にて関数を実行しています。onClick="stopEle()"の処理内容です。onClick="moveEle()"の処理内容です。$('#'+target).animate({left:pos},2000);}基本的にコピペでどなたでも活用できるようになっていますので、ぜひお使いください。id="aBox"></p></div>左右のボタンを複数回クリックして、stopを押してみてください。leftstopright稼働中のAnimationしか停止できないのがわかるかと思います。デフォルトの状態では、複数回溜まったQueueは削除されず残るため、アクティブなAnimationだけ停止され、残ったQueueが実行されます。id="aBox"></p></div>左右のボタンを複数回クリックして、stopを押してみてください。leftstoprightstopを押したタイミングで、それ以降のQueueも全て削除され動作が完全に停止されたのがわかるかと思います。このように『clearQueue』をtrueにすることで以降のQueueの削除が行えます。id="aBox"></p></div>左右のボタンを複数回クリックして、stopを押してみてください。leftstoprightstopを押した瞬間に、Animationが着地する地点(動作が完了した状態)までスキップされたのがわかるかと思います。『jumpToEnd』をtrueにするとstopで停止されたときにAnimationの最後のフレームまでスキップされます。おわりにいかがでしたでしょうか。stopメソッドを利用されている方もいると思いますが、引数を理解するとさらに活用範囲が深まりそうですね。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。