JQuery зависания в Firefox?

Question

Я создал меню миниатюр с .hover () и animate (), которое также содержит некоторые изображения с эффектом прозрачности hover ().

У меня проблемы только с Firefox 8.0 (mac или pc), все остальные браузеры были протестированы и работают нормально.

Что происходит, так это то, что при наведении курсора на меню оно должно появляться, а при наведении на него - снова скрываться. Если я наведу курсор мыши на левую сторону экрана, где миниатюры являются процессом hover (), процесс застревает и зацикливается навсегда. Если я наведусь на правую сторону, где нет миниатюр, то все будет хорошо.

Вы можете увидеть это здесь, чтобы понять цикл ошибок -> http://www.econtentsys.gr/affiliate/xenosk/temp/amigdalos/wedding.php

И мой код:

$('#bottomthumbsmenu').hover(function() {
$('#bottomthumbsmenu').animate({"bottom": "+=80px"}, "slow");
}, function() {
$('#bottomthumbsmenu').animate({"bottom": "-=80px"}, "slow");
});

Есть идеи, почему он застревает только в Firefox? Есть ли способ обойти это?

Заранее спасибо.

Answer 1

Вы пытались использовать метод jQuery stop () для предотвращения очереди анимации? Что-то вроде:

$('#bottomthumbsmenu').hover(function() {
    $(this).stop().animate({"bottom": "+=80px"}, "slow");
}, function() {
    $(this).stop().animate({"bottom": "-=80px"}, "slow");
});

Кроме того, возможно, вы уже заметили, но анимация зацикливается, только если вы наводите курсор на большие пальцы. Если вы удерживаете курсор в правой части экрана, где нет больших пальцев, все в порядке. Возможно, вы захотите разобраться в этом.

Answer 2

Ну, я исправил это, используя плагин hoverIntent вместо стандартного .hover (), используя hoverIntent cherne.net/brian/resources/jquery.hoverIntent.html с небольшой задержкой. Кажется, что он обходит зацикленный цикл, поэтому он работает как положенок.

$("#bottomthumbsmenu").hoverIntent({
over: makeTall, 
timeout: 500, 
out: makeShort
});
function makeTall(){  $(this).animate({"bottom": "+=80px"}, "slow");}
function makeShort(){ $(this).animate({"bottom": "-=80px"}, "slow");}