jQuery.animate background-position

Question

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.

Audubon

The cleanest way to archieve this is using jQuery CSS hooks. Please have a look at my answer to a similiar question here. It comes with a solution to the problem and a demo page. – Nevus

Answer 1

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/

Ptero

Answer 2

As I know jQuery doesn't have ability to animate background. But it's possible with plugins:

http://plugins.jquery.com/project/backgroundPosition-Effect

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

Deportee