Question

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/arrow.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

Answer 1

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.