最好的方法是：在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动画，因为用户可以在动画菜单时进行鼠标悬停，从而导致混乱。