99
101

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-04-07

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

##補足

第一引数
現在のアニメーションをゴールまでジャンプさせるか否か
第二引数
待機状態のアニメーションを破棄するか否か
99
101
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
99
101

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?