これを行うには、どうすればよいですか？表示/非表示のmouseenter/mouseleaveのメニュー、表示を切り替えますか？

Question

http://jsfiddle.net/nicktheandroid/ppNaX/

これはやや理論的です。このメニューは、mouseenter/mouseleaveの表示/非表示を切り替えるトグルボタンを備えています。私の例では、私はトグルをトリガする要素を持っていて、実際にはトグルしませんが、本当に知りたいのは、このようなことをする最良の方法は何ですか？

良い方法がありますか？カスタムjQueryイベント？ .data()を使用していますか？それはより高度な（愚かな？）こ​​とができますか？よりシンプル？利点、落とし穴？

Answer 1

概念的にすべて正しい。詳細はimprovedことができます：

var menuWrapper = $('#menuWrapper'), 
    menu = $('#menu'); 

var toggleFade = function (toggle) { 
    menu.stop(true, true); 
    toggle ? menu.fadeIn() : menu.fadeOut(); 
}; 

menuWrapper.bind('mouseenter', function() { 
    toggleFade(true); 
}).bind('mouseleave', function() { 
    toggleFade(false); 
}); 


$('#showMenu').click(function() { 
    toggleFade(true); 
    menuWrapper.unbind('mouseenter').unbind('mouseleave'); 
}); 

すべてのほとんど - あなたはメニューがアニメーション化されている間、ユーザーが混乱につながる、マウスオーバーを行うことができますので、別のものを実行する前に、アニメーションをstopする必要があります。