0

カーソルが親要素に入ったときに要素をアニメーション化し、マウスが要素を出るときにそのアニメーションを確実に逆にしようとしています-複数レベルのネストされた要素の場合。私はCSSで不格好にそれを行うことができます（トランジションはオプションではありません）が、それをセクシーにするためにjQueryを使用したい;）

私が達成しようとしているものの例は、このタイプのアコーディオン メニューですが、私が言うように、jQuery を使用しています。

これまでのところ、同じ例でmouseenter と mouseleaveを使用してみましたが、最初の展開と縮小の後に動作させることができないようです。

この非表示/表示アニメーションを mouseenter/mouseleave または jQuery で同様のものに確実かつエレガントにバインドするにはどうすればよいですか?

4

1 に答える 1

0

うまくいくようです

http://jsfiddle.net/sechou/Rce8A/2/

$(function(){
  //bind event
  $("li.level1").mouseenter(   
    function(){
       // make sure the item would diplay
       $(this).find("ul:first").find("li.level2").show(); 
       // do "show" 
       $(this).find("ul:first").show(500);       
    });

  $("li.level1").mouseleave(
      function() {
        // do "hide" 
        $(this).find(":parent").hide(500);
      }
  );
});
于 2012-08-16T03:45:48.223 に答える