how can I animate the background-position property using jQuery's animate function without using a plugin? I tried switching back to 1.4.4 when backgroundPosition was supported, however it just seems to work on IE and not on FF or Chrome. I've tried looking at the step callback of the animate function, but I can't get nothing to work.
I had this same problem. The plugin linked by Samich is the only way to hit both birds with one stone (animate in nearly all browsers with nothing but JQuery/Javascript).
Here's an alternative, but it ideally uses a feature-detection script like Modernizr for compatibility:
Use JQuery's .animate() and background-position-x and -y separately for IE (this will work with the latest JQuery). Then in browsers that support CSS transitions (nearly everything besides IE), use .css() instead of .animate() to change the background position and set a CSS transition in your stylesheet.
You'll be covering most browsers with the above, but it may not be AS compatible as just using a plugin. See it at work here: http://jsfiddle.net/lucylou/dVpjh/
As I know jQuery doesn't have ability to animate background. But it's possible with plugins:
来源：https://stackoverflow.com/questions/7719214/jquery-animate-background-position