javascript - 使用按钮切换可见性来执行此 : Show/hide menu on 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在运行另一个动画之前播放动画，因为用户可以在菜单动画时进行鼠标悬停，从而导致困惑。