Why can't I animate backgroundPosition past jquery 1.4.4?

Question

I see here that the lack of backgroundPosition animation in jquery 1.5.0 is a known bug. Has it still not been fixed?

See this jsfiddle, with backgroundPosition animating in jquery 1.4.4, and then look at this one, and see that it isn't working even in jquery 1.7.1.

Any idea when they're going to fix this?

I'm wondering because I just saw a warning in my Chrome console saying this:

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

I'm worried that I'm going to continue to use jquery 1.4.4 for the animating functionality, but then Chrome will pull the functionality in the next update.

UPDATE

The accepted answer, the idea to use background-position-x and y doesn't work with Firefox. For now I'm going to have to go back to 1.4.4, until I find a better solution.

Partridge

Answer 1

You need to specify background-position-x and -y separately like so:

$('div').animate({
  'background-position-x': '-6000px', 'background-position-y': '-200px' }, 4000);

Working example. (jQuery 1.7.1)

As a side note, since your background-position-y isn't changing, you can simply omit that extra line and just change your -x.

Vanward

Sure! Glad to help. Awesome research you did, btw. Bet you're kicking yourself. :p – Vanward

Turns out this is incompatible with Firefox. I'm using 8.0.1. Suggestions? – Partridge

Yeah, not compatible with FireFox, this is my problem. – Agranulocytosis

Answer 2

I had the same issue here: "puff of smoke" effect javascript sprite animation

It seems newer versions of jQuery above 1.4.4 enable smooth background scrolling effects at a cost of breaking sprite animations that are in fact jerky relying on persistence of vision. I'd say the animate function was not intended for this, but it just worked (TM) back then.

To make my background-position sprite animation I wrote a function using setTimeout

http://jsfiddle.net/Y7Ek4/22/

It's more low level but it isn't a lot more code at all.

Beall