jQueryのanimateメソッドは一度全て実行しないと次の動作に移れないという性質を持ちますが、これをキャンセルしてすかさず次の動作に移れるようにしたのがstopメソッドです。
stopメソッドの使い方
とりあえずどうちがうのかをデモで説明します。まず、下が通常のanimateメソッドをかけた箱になります。
何度か上をマウスで通過すると、ひとつひとつのアニメーションを律儀にすべて実行することが確認できます。
<！-- html -->
<div class = "box anime">hover me!</div>
/*CSS*/
.box{
width:200px;
height:50px;
line-height:50px;
border:1px solid black;
cursor:pointer;
}
//jQuery
$('.anime').hover(function(){
$(this).animate({'width':'400px'},1000);
},function(){
$(this).animate({'width':'200px'},1000);
});
次に上の箱にstopメソッドを使用した箱になります。
$(‘セレクタ’).stop()
stopメソッドはanmateの前に書くことにより、条件が整った際に前のアニメーションをキャンセルして次の処理の実行をスタートします。ただし、前の処理が終わる前に何度もホバー/マウスアウトを繰り返すと、同じ処理を何度も繰り返します。
//jQuery
$('.anime-stop').hover(function(){
$(this).stop().animate({'width':'400px'},1000);
},function(){
$(this).stop().animate({'width':'200px'},1000);
});ちなみに上の挙動をCSSメソッドで制御の場合は、最初からキャンセルがかかるのでstopメソッドは使う必要がありません。
/*CSS*/
.anime-css{
transition:1s;
}
//jQuery
$('.anime-css').hover(function(){
$(this).css('width','400px');
},function(){
$(this).css('width','200px');
});stopメソッドの引数
第一引数、第二引数にそれぞれ真偽値を指定することで、残った処理を破棄するか、および最後までジャンプするかを設定できます。デフォルトはstop(false,false)です。
実例で見てみましょう。上の棒をhoverすると下の棒が2秒で往復します。マウスアウトするとstopがかかります。まずはstop(false,false)の場合。
次にstop(true,false)の場合。
第一引数をtrueにすることにより、stopがかかった時点で残った処理が破棄され、アニメーションがストップしています。第一引数はfalseなので、stopがかかると処理は最後まで実行されません。
次にstop(false,true)の場合。
第一引数はfalseなので、残った処理は破棄されず、全て実行されます。かつ第二引数がtrueなので、stopがかかった時点で実行中のアニメーションの最終地点までジャンプし、そこから次のアニメーションがスタートしています。
最後にstop(true,true)の場合。
stopがかかった時点で実行中のアニメーションの最終地点まで一気に飛び、そこから先のアニメーションをキャンセルします。棒が伸びきった状態でもう一度hoverした場合、最初のanimationの目的地と現在の状態が一致するので、1秒間は何も起こりません。
コメント