jQuery Transit
Super-smooth CSS3 transformations and transitions for jQuery
jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.
Refer to the jQuery Transit website for examples.
Usage
Just include jquery.transit.js after jQuery. Requires jQuery 1.4+.
<script src='jquery.js'></script> <script src='jquery.transit.js'></script>
It is also available via bower and npm.
$ bower install --save jquery.transit $ npm install --save jquery.transit
Transformations
You can set transformations as you would any CSS property in jQuery. (Note that you cannot $.fn.animate()
them, only set them.)
$("#box").css({ x: '30px' }); // Move right $("#box").css({ y: '60px' }); // Move down $("#box").css({ translate: [60,30] }); // Move right and down $("#box").css({ rotate: '30deg' }); // Rotate clockwise $("#box").css({ scale: 2 }); // Scale up 2x (200%) $("#box").css({ scale: [2, 1.5] }); // Scale horiz and vertical $("#box").css({ skewX: '30deg' }); // Skew horizontally $("#box").css({ skewY: '30deg' }); // Skew vertical $("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation $("#box").css({ rotateY: 30 }); $("#box").css({ rotate3d: [1, 1, 0, 45] });
Relative values are supported.
$("#box").css({ rotate: '+=30' }); // 30 degrees more $("#box").css({ rotate: '-=30' }); // 30 degrees less
All units are optional.
$("#box").css({ x: '30px' }); $("#box").css({ x: 30 });
Multiple arguments can be commas or an array.
$("#box").css({ translate: [60,30] }); $("#box").css({ translate: ['60px','30px'] }); $("#box").css({ translate: '60px,30px' });
Getters are supported. (Getting properties with multiple arguments returns arrays.)
$("#box").css('rotate'); //=> "30deg" $("#box").css('translate'); //=> ['60px', '30px']
$.fn.transition
Animating - $('...').transition(options, [duration], [easing], [complete])
You can animate with CSS3 transitions using $.fn.transition()
. It works exactly like $.fn.animate()
, except it uses CSS3 transitions.
$("#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() {..}); // everything
You can also pass duration and easing and complete as values in options
, just like in $.fn.animate()
.
$("#box").transition({ opacity: 0.1, scale: 0.3, duration: 500, easing: 'in', complete: function() { /* ... */ } });
Tests
Transit has a unique test suite. Open test/index.html
to see it. When contibuting fixes, be sure to test this out with different jQuery versions and different browsers.
Alternatives
Velocity.js (recommended!)
- Pros: optimized for situations with hundreds of simultaneous transitions. Lots of extra features.
- Pros: no jQuery dependency, great syntax.
- Cons (at time of writing): no iOS support (doesn't use
translate3d
), some IE bugs, no 3D transforms, no animation queue.
- Pros: transparently overrides
$.fn.animate()
to provide CSS transitions support. - Cons: transparently 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.
Support
Bugs and requests: submit them through the project's issues tracker.
Questions: ask them at StackOverflow with the tag jquery-transit.
Chat: join us at gitter.im.
![Chat](http://img.shields.io/badge/gitter-rstacruz / jquery.transit-brightgreen.svg)
Thanks
jQuery Transit © 2011-2014+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors.
ricostacruz.com  · GitHub @rstacruz  · Twitter @rstacruz