Skip to content

Upgrade jQuery's .animate() method to use CSS3 Transitions in modern browsers.

Notifications You must be signed in to change notification settings

louisremi/jquery.transition.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 

Repository files navigation

jquery.transition.js

Upgrade jQuery's .animate() method to use CSS3 Transitions in modern browsers.

How to use it?

Once the plugin has been loaded in the page, the job is done. The full jQuery animation API is still available and functionnal, in both transitions compatible browsers and incompatible ones. New: color animations (text or background) and special easings work out of the box!

When are CSS Transitions used?

The plugin uses feature detection to turn transitions ON in the following browsers:

  • Chrome
  • Safari 4+
  • Firefox 4+
  • iOS Safari
  • Android browsers

Although CSS3 transitions are implemented in Opera, the implementation has too many bugs to be usable from the DOM API.

Note that transitions are turned OFF under certain circumstencies:

  • when a step function is used
  • when the animated object is not an element

How different is it?

Unlike other transition polyfills, this plugin is not a monkey patch over jQuery animation mechanism. It is actually a patched version of effects.js (animation component), stripped from the redundant code to make it a lightweight plugin.

The main benefit is that the full jQuery API is available. Even better, it has been designed to be compatible with cssHooks. The first compatible one is jquery.transform.js. Others will follow.

jquery.transition.js has been tested against jQuery unit-tests, and only 5 of them fail (under investigations). It benefits from the experience of writing csstransition.net to workaround implementation quirks.

When should I use it?

In any case, it is a good practice to test animations both with and without the plugin to see if the benefit is real.

License

MIT Licensed http://louisremi.mit-license.org/, by @louis_remi

PS: Looking for jquery.hoverTransition.js? This project is no longer maintained as it has never met my own expectations. A backup of the code is available in the download section.

About

Upgrade jQuery's .animate() method to use CSS3 Transitions in modern browsers.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published