解析“背景位置”的值时出错

Question

I want to animate my menu. But nothing happens, I only receive the following error in the console: "Error in parsing value for 'background-position'".

Can you please help me?

CSS:

nav li a {
            display:block;
            height:96px;
            width:124px;
            color:#818080;
            text-align:center;
            text-decoration:none;
            padding-top:60px;
            background:url(../img/n1-hover.gif) 0 -146px no-repeat;
        }

JavaScript

  $(document).ready(function() {                    
        $('.menu a').hover(
        function(){$(this).stop().animate({backgroundPosition:'0px 0px'}, 800, 'easeOutBounce')}, 
        function(){$(this).stop().animate({backgroundPosition:'0px -146px'}, 600, 'easeOutBounce')});  
    }); 

I forgot to mention, that I'm using the plugin JQuery Easing .

Answer 1

Remove px part from backgroun position it should work fine. Try this

$(document).ready(function() {                    
                $('.menu a').hover(
                function(){$(this).stop().animate({backgroundPosition:'0 0'}, 800, 'easeOutBounce')}, 
                function(){$(this).stop().animate({backgroundPosition:'0 -146'}, 600, 'easeOutBounce')});  
            });