自作のJQueryドロップダウンメニューの動作を改善しました

MusMusメインメニュー周りの動作を改善しました。

この辺の動きはJQueryというJavaScriptのコーディングをサポートするライブラリで自作しています。

(以前からMusMusへお越しの方は、ページをリロードしないと新しいJavaSqriptファイルが読み込まれないかもしれません)

メニューの画像ロールオーバー

メニューの色とマークがゆっくり浮き出てくる部分。

こんなにシンプルだったのだけど、これだと何度も高速でポインタを重ねて外して、ってやっちゃうとどんどん処理が溜まっちゃう!
280msの間に画像切り替えて、280msで元に戻してるので、560ms以内に次のマウスポインタがホバーすると、もう動きが遅れちゃうんですね。

なので、こんな感じに。

画像切り替え動作中は動作しないようにしました。
画像切り替えはanimate()でopacityを徐々に変えて実現しています。
ですので、現在画像切り替え中かどうかは$(this).css(“opacity”);でimgのopacityを取得してif分で判断しています。

ドロップダウンメニュー

メニューにマウスオーバーするとスッと下に出てくるアレ。

これまたシンプルで良かったのですが・・・

ちょっとややこしくなってしまいました。

fadeOut()で消した要素はdisplay:noneになりますので、ドロップダウン部分のdisplayがblockかどうかで判断しています。

デバッグ

で、ぼくはプログラマでもなんでもなく、こういったのは趣味レベルでしかありません。
変な動作したとかあれば是非ご一報ください!

あと、コードで変なところ、もっとシンプルに書けるとこなども教えて欲しいです。

| カテゴリ:JQuery | 1 コメント

“自作のJQueryドロップダウンメニューの動作を改善しました” への1件のフィードバック

  1. lake より:

    >JavaSqript

コメントを残す