Jquery - Firefox having slow .live() hover speeds, Chrome & IE are fast

OK, so I am working on a new website. Its a social networking type website and it has a lot of jquery interactivity.

Problem comes in when I try using the JQuery.live() for mouseover effects. It runs Very fast in Chrome & Safari, Pretty fast in IE, and slow in Firefox. Very strange as almost always FF is way faster than IE(8/9).

Page in question: http://www.modelfy.com/user/22/info

If you ho开发者_运维知识库ver over the 'latest pictures' in chrome and then in Firefox you will notice a huge difference in speed.

$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    $(this).addClass('hoverclass');
  } else {
    $(this).removeClass('hoverclass');
  }
});

Any help would be hugely appreciated. Also, is .live the best option for optimization?

Thanks!

i'm not totally sure why firefox is slower but you can try to add a context element. Instead of binding all events to the root element you can do something like this:

$('div.clickme', $('#recent_photos')[0]).live('mouseover mouseout', function() {
  ...
});

Doing this minimizes the amount of traversal and the amount of events bound to the same node.

To figure out which function call is slow you can profile your code with firebug. To get useful results you have to use the uncompressed version of jQuery.