CODEWITHSUNDEEP
jqueryfirefoxmouseentermouseleave
user2212564
user2212564

Reputation: 261

mouseenter/mouseleave in Firefox

I have a script that when you hover (mouseenter/mouseleave) it uses jQuery's easing plugin to make the link easeOutBounce. I also have css styling on the jQuery as my images are created using a css sprite so depending on the hover state the X and Y positons change. This works fine in browsers apart from Firefox.

I was wondering if anyone has come across this problem before and a solution they may have found to solve this? I have identified from research that it is something to do with the mouseenter/mouseleave method.

Here is an example of how the code works for a link:

(example shows re-named classes and div's)

$(function() {
    $('#navigation').on('mouseenter', '#link-1:not(.selected)', function() {
        $(this).stop().animate({
            backgroundPositionX:0,
            backgroundPositionY:0
        }, 1000, 'easeOutBounce');
    }).on('mouseleave', '#link-1:not(.selected)', function() {
        $(this).stop().animate({
            backgroundPositionX:0,
            backgroundPositionY:-156
        }, 700, 'easeOutBack');
   });
});

This is repeated for other links on the page.

/* Edited as FF suggestion- does not like the background element but works slightly when edited like this but the hover state for background pos needs to be 00 and doesn't like the -84 and the hover takes the sprite to the side rather than down! 

$(function() {
    $('#navigation #link-1:not(.selected)').hover(
function () {
       $(this).stop().animate({
          'background-position':0
        }, 1000, 'easeOutBounce');
},
function () {
      $(this).stop().animate({
            'background-position': 0 -156
        }, 700, 'easeOutBack');
    }
    );
});

Upvotes: 1

Views: 1092

Answers (1)

FLX
FLX

Reputation: 2679

I don't understand the problem. If the problem is that mouseleave does not trigger, I resolved it by using the hover() function instead of mouseenter/mouseleave.

Can you try this code ?

$(function() {
    $('#navigation #link-1:not(.selected)').hover(
function () {
       $(this).stop().animate({
            backgroundPositionX:0,
            backgroundPositionY:0
        }, 1000, 'easeOutBounce');
},
function () {
      $(this).stop().animate({
            backgroundPositionX:0,
            backgroundPositionY:-156
        }, 700, 'easeOutBack');
}
);
});

If the problem is that the animation is sometimes "jumpy", change the stop function to stop(true, true)

Upvotes: 1

Related Questions