Удаление события наведения для клика, а затем привязка его снова

У меня есть div с именем #footer, поля которого анимируются с помощью jQuery, чтобы сдвигать его вверх, когда пользователь наводит на него курсор. Внутри #footer находится div под названием #toggle, который при нажатии снова анимирует нижний колонтитул.

Все работает нормально, за исключением того, что когда #toggle нажимается и #footer анимируется обратно вниз, если я перемещаю мышь, она снова вызывает наведение, даже если мышь больше не находится над #footer. Это сводит меня с ума!

Вот jQuery:

$('#footer').hover(function(){
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow");
    $('#toggle').addClass('expanded'); 
});

$('#toggle').click(function(){ 
    $('#footer').stop(true, true).animate({"margin-bottom": "-120px"}, "slow");
    $(this).removeClass('expanded');
});

Что мне нужно, я думаю, так это отменить привязку события наведения, когда оно будет выполнено, и повторно привязать его, когда будет нажата #toggle. Может быть? Но я не могу понять, как заставить его работать.


click jquery hover jquery-animate unbind
person Sean Hawkridge    schedule 29.02.2012    source источник
comment
Используйте событие mouseenter вместо hover. api.jquery.com/mouseenter   -  person Stefan    schedule 29.02.2012
comment
Принято, так как вы исправили его первым, примерно за минуту! Спасибо еще раз.   -  person Sean Hawkridge    schedule 29.02.2012

Ответы (3)


arrow_upward
1
arrow_downward

Вероятно, вам следует использовать событие mouseenter вместо наведение.

Использование hover с одним аргументом вызовет срабатывание функции на обоих mouseenter и mouseleave.

наведение(обработчикInOut(eventObject))

person Stefan    schedule 29.02.2012

arrow_upward
0
arrow_downward

Поскольку вы предоставляете только один параметр для события hover(), оно будет вызываться как для mouseenter, так и для mouseleave. Если вы измените его на использование mouseenter(), он должен работать правильно.

$('#footer').mouseenter(function(){
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow");
    $('#toggle').addClass('expanded'); 
});
person Rory McCrossan    schedule 29.02.2012

arrow_upward
0
arrow_downward

Чтобы развязать/пересвязать, объявите анонимную функцию в другом месте (и дайте ей имя), а затем передайте ее в качестве параметра:

function footerHover() {
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow");
    $('#toggle').addClass('expanded');
    $(this).unbind('hover');
}
$('#footer').hover(footerHover);

$('#toggle').click(function(){
    $('#footer').hover(footerHover);
    $('#footer').stop(true, true).animate({"margin-bottom": "-120px"}, "slow");
    $(this).removeClass('expanded');
});

Вы также можете попробовать связать hover с двумя функциями (поскольку именно так предполагалось использовать hover):

$(selector).hover(functionWhileHovering, functionWhenNotHovering);

Более конкретно:

$('#footer').hover(function () {
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow");
    $('#toggle').addClass('expanded');
    $(this).unbind('hover');
}, function () {
    $('#footer').stop(true, true).animate({"margin-bottom": "-120px"}, "slow");
    $(this).removeClass('expanded');
});
person pete    schedule 29.02.2012