Переключить события захвата в JQuery или Javascript?

Question

На моей странице есть элементы (id=itemid), которые при наведении на них вызывают другой элемент (id=panel)стать видимым (через fadeIn).В основном, при наведении на itemid панель вызывает fadeIn, а mouseOut приводит к fadeOut.

Я хочу сделать кнопку, чтобы при нажатии элемент панели не выводил fadeIn илино остается видимым.При нажатии этой кнопки события mouseIn и mouseOut должны снова работать.

Есть идеи?

Спасибо!

$(document).ready(function(){
    $('.itemid').hover(
        function () {
            $('.panel').fadeIn(300);
        },
        function () {
            $('.panel').fadeOut(200);
        }
    );
});

Answer 1

Установите флаг для того, делать ли затухание или нет:

$(document).ready(function(){
var fadeEnabled = true;
$('.itemid').hover(
    function () {
        if (fadeEnabled) {
            $('.panel').fadeIn(300);
        }
    },
    function () {
        if (fadeEnabled) {
            $('.panel').fadeOut(200);
        }
    }
);

$("#myButton").click(function() {
     fadeEnabled = !fadeEnabled;
});

});

Затем просто переключите этот флаг с помощью кнопки, и он включит или отключит поведение затухания.

Answer 2

При нажатии кнопки, используйте $ (селектор) .unbind ('mousein') на вашем объекте / элементе, чтобы отменить регистрацию событий., И перерегистрацию при другом нажатии кнопки. Продолжайте переключаться при каждом нажатии кнопки.