Search code examples
jquerygoogle-chromejquery-animatebackground-position

Why can't I animate backgroundPosition past jquery 1.4.4?


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.


Solution

  • 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.