jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.
Refer to the website for full reference.
Just include this script after jQuery. Requires jQuery 1.4+.
<script src='jquery.js'></script>
<script src='jquery.transit.js'></script>You can set transformations as you would any CSS property in jQuery.
(Note that you cannot $.fn.animate() them, only set them.)
$("#box").css({ scale: 2 }); // Scale up 2x (200%)
$("#box").css({ x: '30px' }); // Move right 30px
$("#box").css({ x: 30 });
$("#box").css({ y: '60px' }); // Move down 30px
$("#box").css({ y: 60 });
$("#box").css({ translate: '60px,30px' }); // Move right 60px, and down 30px
$("#box").css({ rotate: '30deg' }); // Rotate 30 degrees clockwise
$("#box").css({ rotate: 30 });
$("#box").css({ skewX: '30deg' }); // Skew horizontally by 30 degrees
$("#box").css({ skewX: 30 });
$("#box").css({ rotate: '+=30' }); // Relative values are supported
$("#box").css('rotate'); // Getters are okay, tooYou can animate with CSS3 transitions using $.fn.transition(). It works
exactly like $.fn.animate(), except it uses CSS3 transitions.
The syntax is $.transition(options, [duration], [easing], [complete]).
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast'); // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in'); // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..}); // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..}); // everythingYou can also pass duration and easing and complete as values in options, just like in $.fn.animate().
- Pros: no jQuery dependency, great syntax.
- Cons (at time of writing): no iOS support (doesn't use
translate3d), some IE bugs.
- Pros: transparently overrides
$.fn.animate()to provide CSS transitions support. - Cons: transpalently overrides
$.fn.animate(). No transformations support.
- Pros: Tons of transformations.
- Cons: No CSS transition support; animates via
fx.step.
- Pros: simply provides rotation.
- Cons: simply provides rotation. No transitions support.
© 2011, Rico Sta. Cruz. Released under the MIT License.
jQuery Transit is authored and maintained by Rico Sta. Cruz with help from it's contributors. It is sponsored by my startup, Sinefunc, Inc.
- My website (ricostacruz.com)
- Sinefunc, Inc. (sinefunc.com)
- Github (@rstacruz)
- Twitter (@rstacruz)