Каков наилучший способ сделать это: показать / скрыть меню в mouseenter / mouseleave, с кнопкой для переключения видимости?

Question

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

Это несколько теоретически. Меню показывает / скрывает указатель мыши / указатель мыши с кнопкой переключения, чтобы удалить эту функцию, если пользователь считает ее раздражающей. В моем примере у меня есть элемент, который запускает переключение, просто показывая его, а не переключая его, но я действительно хочу знать, каков наилучший способ сделать что-то подобное?

Есть ли лучший способ сделать это? Пользовательские события jQuery? Используете .data()? Может ли это быть более продвинутым (глупо?)? Более простой? Преимущества, подводные камни?

Answer 1

Концептуально все правильно. Детали могут быть улучшены :

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');
});

Больше всего - вам нужно остановить анимацию, прежде чем запускать другую, потому что пользователь может навести курсор мыши, пока меню анимировано, что приводит к беспорядку.