Help us understand the problem. What is going on with this article?

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

More than 5 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)にすればいいようです。

補足

第一引数
現在のアニメーションをゴールまでジャンプさせるか否か
第二引数
待機状態のアニメーションを破棄するか否か
SotaSuzuki
福岡で Web のエンジニアをしています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away