jquery.animate-enhanced plugin

Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+

Properties supported: (more to come)

New features in v1.0:

Follow @benpbarnett

Note that any properties not mentioned above will simply be handled by the standard jQuery $.animate() method. This plugin adds new functionality without taking any away. Requires jQuery 1.3.2+


The animation types can be used in any combination, and with any number of elements. See 3 different types below:

Animate with CSS3 (leaveTransforms:false)

Animate with CSS3 (leaveTransforms:true)

Animate with DOM (avoidTransforms:true)

Awaiting button click...

What it does

The plugin will analyse the properties you're animating on, and select the most appropriate method for the browser in use. This means your transitions on left, top and opacity will convert to a CSS3 transition on Webkit & Mozilla agents that support it, and Opera 10.50+. If the user is on a browser that has no CSS3 transitions, this plugin knows about it and won't get involved. Silent degradation :)

Multiple callback mechanisms are created internally to monitor for DOM manipulation and for all 'transitionend' CSS3 events to be picked up. This means you have one neat callback() for the whole animation regardless on whether the plugin is using CSS3, DOM, or both for its animations.

Progressively enhanced CSS3 animations without having to do any browser detection or special CSS, therefore using the same Javascript across your applications and websites.

As this plugin uses CSS3 translate where available, there is an internal callback mechanism to reset the 'left' and/or 'top' properties so that your layout is unaffected.


Usage is identical to the jQuery animate() function, but it comes with 3 new paramaters, which are totally optional and safe to leave untouched for general use:




Licensed under the MIT License.



Please DO NOT put bug reports on the comments below. Feel free to report any issues on the Github Issues page.

blog comments powered by Disqus Fork me on GitHub