IE 9 ripristina la posizione di sfondo quando si passa il mouse (IE bug?)

Non riesco a credere di aver trovato qualcosa che funziona sia in IE8 che in IE7 ma fallisce in IE9. Ecco la pagina su cui stavo lavorando: [Link al sito] [1]. Si noti come in IE9, nel menu laterale quando si passa il mouse su un collegamento, il browser reimposta lo sfondo alla background-position: 0 0 e solo dopo che questo si applica, lo script lo anima in background-position: -20px 0 (dove voglio che vada innanzitutto). C’è qualcosa che ho fatto di sbagliato o c’è un bug di IE? Anche bisogno di aiuto per risolvere il problema.

ecco la sceneggiatura che sto ascoltando solo per i creatori di IE:

**

  $('#nav_bar li') .css( {backgroundPositionX:"-224px", backgroundPositionY:"0px"} ) .mouseenter(function(){ $(this).stop().animate( {backgroundPositionX:"-20px"}, {duration:550}) }) .mouseleave(function(){ $(this).stop().animate( {backgroundPositionX:"-224px", backgroundPositionY:"0px"}, {duration:550}) }) 

Grazie per l’aiuto!

[1]:

Posso suggerire la seguente soluzione solo CSS?

 #nav_bar li { /* whatever you need for the background image */ background-position: -224px 0; transition: background-position 0.55s ease; -webkit-transition: background-position 0.55s ease; } #nav_bar li:hover { background-position: -20px 0; } 

Se vuoi davvero che funzioni in IE9 e in basso (dato che funziona perfettamente con IE10), prova ad animare backgroundPosition stesso, piuttosto che le sue proprietà del componente.

 $("#nav_bar li") .css({backgroundPosition:"-224px 0"}) .hover( function() {$(this).stop().animate({backgroundPosition:"-20px 0"},{duration:550});}, function() {$(this).stop().animate({backgroundPosition:"-224px 0"},{duration:550});} );