jQueryでアニメーションを行う可能性のある要素にたいして、アニメーションしていない時のみアニメーションさせるという指定をしたいがために、『$ele.not(‘:animated’).animate()』なんてやり方をしていたのですが、どうにも動きがおかしく感じ、もう少し調べてみるとアニメーションを停止するstopというメソッドがあることを知りました(参考：.stop() | jQuery 1.9 日本語リファレンス | js STUDIO)。
ただ、指定の要素はコールバックを指定している要素だったこともあり、アニメーションをストップするだけでは駄目だったのですが、もう少し調べてみると、第二引数にtrueを指定することにより、アニメーションの最後まで移動してコールバックまで実行してくれるということが分かりました(参考：jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） | tech.kayac.com – KAYAC engineers’ blog)。
じゃあ、第一引数は？ というと、連続でアニメーションの指定をしている時、第一引数がfalseであれば、次のアニメーションを実行し、trueであれば次のアニメーションも実行しないという指定だそうです。
というわけで、分かりやすいようにテストページを作ってみました：jQueryのstopメソッドのテスト。
JavaScriptの箇所のコードは下記のとおりです。
$(function(){
// スタートボタンクリック時の処理
$('.btn-start').click(function(){
var $obj = $(this).parent().next().find('.animate-object');
$obj.css({'left': 0, 'background-color':'red'})
.animate({'left': '700'}, 5000, "linear", function(){ // 5秒かけて右端に移動
$obj.css('background-color', 'blue'); // アニメーションが終了すると背景を青色に変更
}).animate({'left':'0'}, 5000); // 最初のアニメーションの次に5秒掛けて左端に移動
$(this).hide(); // スタートボタンを非表示
$(this).next().show(); // ストップボタンを表示
});
// ストップボタンクリック時の処理
$('.btn-stop').click(function(){
var $obj = $(this).parent().next().find('.animate-object');
$obj.stop($(this).data('clearquere'), $(this).data('jumptoend')); // アニメーションストップ。ストップボタン要素の独自データ属性に『data-clearquere="false" data-jumptoend="false"』というような感じで記述
$(this).hide(); // ストップボタンを非表示
$(this).prev().show(); // スタートボタンを非表示
});
});
スタートボタンを押すと右側の赤い四角が右端までゆっくり移動し、右端までたどり着くと青色になって今度は逆に左端までゆっくり移動するようなアニメーションです。
スタートボタンを押すと、ストップボタンが出現します。そのストップボタンを押すと、stopメソッドを実行します。引数は囲いの上の見出しに書いてあります(clearQuereが第一引数で、jumpToEndが第二引数)。
試しにスタートボタンを押して赤い四角が右端にたどり着くまでにストップボタンを押してみてください。
上から1番目は途中でストップボタンを押すと、ストップボタンを押した位置から赤色のまま左端にゆっくり移動するようになります。
上から2番目は途中でストップボタンを押すと、瞬時に右端まで移動して青色になり、左端にゆっくり移動するようになります。
上から3番目は途中でストップボタンを押すと、そのストップボタンを押した時の位置で停止します。
上から4番目は途中でストップボタンを押すと、瞬時に右端まで移動して青色になり、その場所で停止します。
これはすごい便利ですね。
コメント