Question

I am using Jquery to do a disjointed hover effect. I have a div with a background image and when you hover over one of the menu items, it adds a class to the div and changes the background image. It works great however, it flickers (slight delay) in every version of IE. See the code below:

$(document).ready(function() {
  $("#main-menu li a").hover(function() {
 $("#corvette").addClass('vette-over');
      }, function() {
        $("#corvette").removeClass('vette-over');
      });

Is there anything that can be done about this?

Answer 1

This isn’t exactly semantic, but you could create another element inside #corvette that has the hover image as its background. Then you just need to toggle the hover element.

Check it out: http://www.jsfiddle.net/bryandowning/RuBqW/

Feel free to use fadeToggle() if you like, but if you do make sure you add stop(true, true) before it. For example:

$("#image .hover").stop(true, true).fadeToggle();

Edit:

You might also be able to fix the issue by making a single sprite image and have your hover class change the background-position instead of changing the background-image. This way you wouldn’t have to add the extra DOM element. If you go this route, you should still pass one function to hover() and use toggleClass('vette-over').