Question

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

http://jsfiddle.net/rwaldron/TzWQA/

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);
});

Answer 1

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.