Repository files navigation

jQuery Transit is a plugin for to help you do CSS transformations andtransitions in jQuery.

Refer to thejQuery Transit website forexamples.

Just includejquery.transit.js after jQuery. Requires jQuery 1.4+.

<scriptsrc='jquery.js'></script><scriptsrc='jquery.transit.js'></script>

It is also available viabower andnpm.

$ bower install --save jquery.transit$ npm install --save jquery.transit

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 returnsarrays.)

$("#box").css('rotate');//=> "30deg"$("#box").css('translate');//=> ['60px', '30px']

$('...').transition(options, [duration], [easing], [complete])

You can animate with CSS3 transitions using$.fn.transition(). It worksexactly 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 passduration andeasing andcomplete as values inoptions, just like in$.fn.animate().

$("#box").transition({opacity:0.1,scale:0.3,duration:500,easing:'in',complete:function(){/* ... */}});

Transit has a unique test suite. Opentest/index.html to see it. Whencontibuting fixes, be sure to test this out with different jQuery versions anddifferent browsers.

Velocity.js (recommended!)

• Pros: optimized for situations with hundreds of simultaneous transitions. Lots of extra features.

Move.js

• Pros: no jQuery dependency, great syntax.
• Cons (at time of writing): no iOS support (doesn't usetranslate3d), someIE bugs, no 3D transforms, no animation queue.

jQuery animateenhanced

• Pros: transparently overrides$.fn.animate() to provide CSS transitionssupport.
• Cons: transparently overrides$.fn.animate(). No transformations support.

jQuery 2D transformations

• Pros: Tons of transformations.
• Cons: No CSS transition support; animates viafx.step.

jQuery CSS3 rotate

• Pros: simply provides rotation.
• Cons: simply provides rotation. No transitions support.

Bugs and requests: submit them through the project's issues tracker.

Questions: ask them at StackOverflow with the tagjquery-transit.

Chat: join us at gitter.im.

jQuery Transit © 2011-2014+, Rico Sta. Cruz. Released under theMIT License.
Authored and maintained by Rico Sta. Cruz with help fromcontributors.

ricostacruz.com  · GitHub@rstacruz  · Twitter@rstacruz