Jquery Hover Background Flicker in IE

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")开发者_如何学Python.removeClass('vette-over');
      });

Is there anything that can be done about this?

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').

You cannot get faster than that, AFAIK. Attribute-operations (like manipulating classes) are very fast with jQuery, but IE is simply a very slow browser.

I had a similar problem with flickering background images in IE when I changed the background image using Jquery on hover-over. In my case I had a set of images which were in greyscale and hovering over them flipped them into colour. It’s for a CMS so the client was only willing to upload one colour image and have the rest automated. I accidentally stumbled onto a solution perhaps it helps someone.

I noticed when I create the same background image but as a plain image on the page ie. <img src=”bgImage1.jpg” /> the flickering went away. So all I did was the old school image preload trick we used to do in when we were still concerned about low bandwidth user experience as in dialup.

Created a div with display:none attribute and chucked a copy of all my flickering images in there.

<div style="display:none;">
    <img src="bgImage1.jpg" />
    <img src="bgImage1hover.jpg" />
</div>

I know it increases the page size, but it stops the flickering with no visual change to the page as far as I can see. I have check it on IE and FF and it seem to work