Jquery - animate background issue

Question

I searched a background animation samples in web. i found this url :

and it works safari and chrome, but the animation background is not working with opera,and Firefox. is there any workaround to make this work across the browsers?

the code it contains is :

$(document).ready(function(){
 $("#puppies")
    .animate({
        backgroundPositionY: "0px",
        backgroundPositionX: "-250px"
    }, 2000);
});

Don't use that, instead, use `backgroundPosition: 'LeftPX TopPX'`and use negative values to transcend where need be. — Ohgodwhy, May 24 '12 at 05:48

Fresheyeball · Answer 1 · 2012-05-24T06:02:46.090

1

@AlphaMale 's description of why your code is failing is accurate. I use a handy snippet that makes this work cross browser with the following syntax:

$(document).ready(function(){
  $("#puppies")
    .animate({
        backgroundPosition : "(0 -250px)"
    }, 2000);
});

See it in ACTION! http://jsfiddle.net/dUmNN/1/

edited May 24 '12 at 06:02

answered May 24 '12 at 05:55

Fresheyeball

29,567
20
102
164

score 1 · Accepted Answer · edited May 23 '17 at 10:09

backgroundPositionY and backgroundPositionX are not supported in FF. So If you want to animate the background you should pass X,Y values collectively to background-position.

Here is a discussion on the same issue:

background-image animation not working in Firefox

Also see:

http://www.protofunc.com/scripts/jquery/backgroundPosition/

http://snook.ca/archives/javascript/jquery-bg-image-animations/

Hope this helps.

Jquery - animate background issue

2 Answers2