Удаление события зависания для клика, затем связывание его снова - PullRequest
Новая
       42

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

0 голосов
/ 29 февраля 2012

У меня есть 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');
});

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

Ответы [ 3 ]

1 голос
/ 29 февраля 2012

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

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

hover (handlerInOut (eventObject))

0 голосов
/ 29 февраля 2012

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

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');
});
0 голосов
/ 29 февраля 2012

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

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