Edited at

【jQuery】stopメソッドを理解する

More than 3 years have passed since last update.


stopメソッド

私はstopメソッドを$(hoge).stop().animate({のような、

引数を指定しない方法でしか使っていませんでした。

しかし、true/falseの引数の使い分けで四種類の動作が使い分けることができるようだったので、

ビボっておこうと思います。


引数によって変わる処理の仕方


stop.js


/* 1.現在のアニメーションが最後まで完了していなくても、その状態から次のアニメーションに移行する*/
stop(false, false).animate
stop().animate

/*2.現在のアニメーションが完了しないまま、次のアニメーションは破棄されて実行されないので、
最初のアニメーションの途中状態で止まる*/

stop(true, false).animate

/*3.現在のアニメーションは最終的なゴールにジャンプし、そこから次のアニメーションが開始される*/
stop(false, true).animate

/*4.現在のアニメーションは最終的なゴールにジャンプするが、次のアニメーションは破棄されて実行されない*/
stop(true,true).animate


fadeやslideでもそうですが、ホバーアニメーションの途中でマウスアウトしたりすると、

opacityや高さが戻りきっていない状態の時があるのはstop()stop(true, true)にすればいいようです。


補足


第一引数

現在のアニメーションをゴールまでジャンプさせるか否か

第二引数

待機状態のアニメーションを破棄するか否か