jQuery background position doesn't work in FireFox?

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!

you can try out this http://stackoverflow.com/questions/6322347/jquery-1-6-backgroundposition-vs-backgroundpositionx-and-ff4-compatibility — Chandrakant, Aug 28 '12 at 13:58

score 5 · Accepted Answer · edited Nov 02 '12 at 13:02

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.

score 1 · Answer 2 · edited May 23 '17 at 11:55

1

Quoting https://stackoverflow.com/a/8378817/168735

background-position-x is non standard CSS property and it is not supported by Firefox.

See:

http://snook.ca/archives/html_and_css/background-position-x-y https://stackoverflow.com/a/8175460/1011582

edited May 23 '17 at 11:55

Community

1
1

answered Aug 28 '12 at 13:58

n00dle

5,949
2
35
48

score 1 · Answer 3 · answered Aug 28 '12 at 14:08

1

As pointed out earlier, background-position-x and background-position-y are nonstandard.

There are two options you could explore:

jQuery background animation plugin (example: http://snook.ca/archives/javascript/jquery-bg-image-animations/)
CSS3 transitions

answered Aug 28 '12 at 14:08

Paul Sham

3,185
2
24
31

The addon makes it work in FF (if you're using jQuery 1.7). jQuery 1.8 messes up the whole concept of backgroundPosition it seems :( – cartbeforehorse Sep 12 '12 at 21:10

score 0 · Answer 4 · answered Aug 28 '12 at 13:57

0

As you can read here: http://my.safaribooksonline.com/0130092789/ch14lev1sec7?portal=oreilly, this is a Internet Explorer CSS specific property.

answered Aug 28 '12 at 13:57

Tom Naessens

1,827
22
38

How come it works in Chrome? And is there any other way to animate background position? – Jay Wit Aug 28 '12 at 13:58
Because Chrome has copied a bunch of IE-specific stuff (including things like window.event for example). – Boris Zbarsky Aug 29 '12 at 06:47

Setthase · Answer 5 · 2012-08-28T14:23:52.370

0

Firefox don't support background-position-x or background-position-y. You should write a simple function that calculate current x and y position, desired position and using setTimeout and $(el).css just animate it. Or use CSS3 animations.

P.S. Sorry, for my previous post.

edited Aug 28 '12 at 14:23

answered Aug 28 '12 at 13:58

Setthase

13,988
2
27
30

1

Then again, animate does not accept two values ! – adeneo Aug 28 '12 at 13:59
Edited code, this should help you :) Use values in string – Setthase Aug 28 '12 at 14:00
Do you even test this stuff before posting ? – adeneo Aug 28 '12 at 14:02
adeneo - my bad, sorry for creating confusion untested funciton, I was to much sure it would be work and don't test it – Setthase Aug 28 '12 at 14:24

jQuery background position doesn't work in FireFox?

5 Answers5

Linked