jQuery animate background position won't change but css does

This is the stranges thing, this works:

$('#box').css({"backgroundPosition": "0px 250px"});

But this does not work, it just doesn't change position:

$('#box').animate({"backgroundPosition": "0px 250px"});

Tested in FF and chrome using jQuery 1.5.2 and 1.6.1.

FF reports "Warning: Error in parsing value for 'background-position'. Declaration dropped."

My CSS is:

#box { padding-left: 30px; background: url(../img/a开发者_如何转开发rrow.gif) 0px 30px no-repeat; }

Any ideas as to why animate won't work?

jsfiddle at http://jsfiddle.net/wyhqu/ try changing animate to css and you will see it works

I'm pretty sure you can't do this.

The animate documentation says this:

most properties that are non-numeric cannot be animated using basic jQuery functionality

While you are passing 2 numbers, you could pass "center" or some other non-numeric value.

There does appear to be a plugin to allow you to do it:

http://plugins.jquery.com/project/backgroundPosition-Effect

I haven't used it though so I have no idea how good it is.

Try this:

$('#box').animate({"background-position": "0px 250px"});

In the CSS case, it's relying on the browser to parse "backgroundPosition", which it does just fine. In the animate case, jQuery has to do the parsing. Maybe the developers only added the hyphenated case.