Fork
4
Fav
10
View
19108
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 23 lines
  • HTML 35 lines
  • CSS 28 lines
実装したかったのは#demo4の奴。

【#demo1】
animateのみだと
マウスをのっけるはずすを繰り返すと
アニメーションキューはどんどんたまっていって
マウスを外した後もたまったアニメーションが繰り返される。

【#demo2】
#demo1を回避するべく
animate()の前にstop()を行う。
でもこれだとマウスをすぐ外した場合は
ほとんどアニメーションされずに寂しい。

【#demo3】
じゃ、mouseover時のみにstop()すればいいかというと
これだけだと実行中のアニメーションが停止するだけで
#demo1と同じ現象が起こる。

【#demo4】
で、stop()は二つの引数を指定できて、
第一引数はたまっているキューを削除するかしないかで
mouseover時にstop(true)を指定すると
アニメーションキューは貯まらずに
すぐにmouseoutしても、
mouseover時のアニメーションを最後までしてくれるものが作れます。

stopの引数や、このあたりの参考記事
http://tech.kayac.com/archive/jquery.stop_jumptoend_javascript_advent_calendar_2010_5.html
  • jQuery hoverによるanimateでstopの使い方サンプル
  • jQuery v1.7.1
  • jQuery hoverによるanimateでstopの使い方サンプル

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ksk1015

Author

CSSerです。JSも好きです。 ブラウザ上の技術全般に興味があります。 詰めの甘いコード多いので参考にする際は要検証。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by