CODEWITHSUNDEEP
jqueryfirefoxhoverjquery-animate
Xenos K.
Xenos K.

Reputation: 5

jquery hover bug in firefox?

I created a thumbnail menu with .hover() and animate() that contains some images with a hover() opacity effect as well.

I am having problems with Firefox 8.0 ( either mac or pc ) only, all the others browsers where tested and work fine.

What goes on is that when I hover over the menu it should appear and when I hover out it should hide again. If I hover on the left side on the screen where the thumbnails are the hover() process gets stuck and loops forever. If I hover at the right side where there are not thumbnails it works fine.

You can see it here to understand the error loop -> http://www.econtentsys.gr/affiliate/xenosk/temp/amigdalos/wedding.php

And my code:

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

Any ideas why it gets stuck only in firefox? Is there any way arround it?

Thank you in advance.

Upvotes: 0

Views: 1499

Answers (2)

Xenos K.
Xenos K.

Reputation: 5

Well I fixed it using hoverIntent plugin instead of the default .hover() using hoverIntent cherne.net/brian/resources/jquery.hoverIntent.html with a small delay it seems that it bypasses the bugged loop so it works as supposed to.

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

Upvotes: 0

Leo
Leo

Reputation: 5276

Have you tried to use jQuery's stop() method to prevent animation queue? Something like :

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

Also, maybe you've already noticed, but the animation will get into a loop only if you hover over the thumbs. If you keep your cursor to the right side of the screen, where there are no thumbs, everything is fine. You might want to look into this.

Upvotes: 1

Related Questions