CODEWITHSUNDEEP
javascriptjqueryjquery-animatebackground-position
Ivan
Ivan

Reputation: 1851

jQuery.animate background-position

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.

Upvotes: 1

Views: 3455

Answers (2)

Lucy Lou
Lucy Lou

Reputation: 246

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/

Upvotes: 1

Samich
Samich

Reputation: 30115

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/

Upvotes: 1

Related Questions