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

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

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

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

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

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

$(function(){  
 $(" #drop img ").hover(
  function(){$(this).animate({"opacity": "0"},280);},
   function(){$(this).animate({"opacity": "1"},280);
  }); 
});

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

なので、こんな感じに。

$(function(){
 $(" #drop img ").hover(
  function()
　{
  var opa = $(this).css("opacity");
　 if( opa == 1)
   {$(this).animate({"opacity": "0"},180);}
  }, //hover第2要素これ以降

 function()
  {
  var opa = $(this).css("opacity");
   if( opa != 1)
   {$(this).animate({"opacity": "1"},180);}
   else
   {$(this).animate({"opacity": "1"},1);} //高速ホバー時誤動作防止
  }
 );
});

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

ドロップダウンメニュー

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

$(function(){  $(" #drop li").hover(
   function(){$(this).find("ul:first").slideDown(220);},
   function(){$(this).find("ul:first").fadeOut(150);}); 
});

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

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

$(function(){  $(" #drop li").hover(
   function(){    var ul_display = $(this).find("ul:first").css("display"); 
   if(ul_display != "block"){　//処理蓄積防止    $(this).find("ul:first").slideDown(180);
    }
    }, //これ以降、hoverの第Ⅱ要素、マウスが外れた時の処理
    function(){$(this).find("ul:first").fadeOut(120); 
   }); //End of .hover
 });

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

デバッグ

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

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