Question

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

This is somewhat theoretical. The menu shows/hides on mouseenter/mouseleave, with a toggle button to remove this functionality should a user find it annoying. In my example i have the element that triggers the toggle just showing it and not actually toggling it, but what I really want to know is, what’s the best way to do something like this?

Is there a better way to do it? Custom jQuery events? Using .data()? Could it be more advanced(silly?)? More simple? Benefits, pitfalls?

Answer 1

Conceptually all correct. Details can be 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');
});

Most of all — you need to stop the animation before running another one, because the user can do a mouseover while the menu is animated, leading to a mess.