Question

Possible Duplicate:
jquery.animate background-position doesn't work

I have a small script that animates background positions, sadly it doesn’t work in FireFox.
It works in IE and Chrome.

$('#background').animate({
     'background-position-x': -1020
});

How come it doesn’t work in FireFox?
Thanks in advance!

Answer 1

You can always create your own little plugin, it’s not that hard.

Using jQuery 1.8 we now have access to the $.Animation method that gives us the animated values directly without to much work, so we can do something like :

$.fn.animateBG = function(x, y, speed) {
    var pos = this.css('background-position').split(' ');
    this.x = parseInt(pos[0]) || 0;
    this.y = parseInt(pos[1]) || 0;
    $.Animation( this, {
        x: x,
        y: y
      }, { 
        duration: speed
      }).progress(function(e) {
          this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    });
    return this;
}

And then to use it we can do:

$("#background").animateBG(x-value, y-value, speed);​

live example:
$(“#background”).animateBG(“0px”, “-45px”, 300);​

FIDDLE

Disclaimer: This is not a finished and tested plugin, but something I spent ten minutes creating in jsFiddle, but test it out and do the changes you need to, and it should work just fine for you.