Question

I have an moving background menu. its ok in Chrome and Firefox but not working in IE6 & 7
IE Says, css(…) null or not an object.

Here is the code;

$(".menu>li")
  .mouseover(function(){
   var myx = $(this).css('background-position').split(' ')[0];
   //alert(myx);
   if(myx!=""){
   $(this).stop().animate({backgroundPosition:myx+" -30"},200)
   }
  })
  .mouseout(function(){
   var myx = $(this).css('background-position').split(' ')[0]
   //alert(myx);
   if(myx!=""){
    $(this).stop().animate({backgroundPosition:myx+" 0"},100)
   }
  })

and this is the sample page: http://beta.hengame.net/

Answer 1

Found the problem, and solved it. Just replace

$(this).css('background-position').split(' ')[0]

with

$(this).css('background-position-x')

(which is cleaner anyway). Tested in IE9 and Chrome9, but I’m fairly confident it’s going to work with the other browsers too.