- Notifications
You must be signed in to change notification settings - Fork0
Super-smooth CSS3 transformations and transitions for jQuery
f2er/jquery.transit
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
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 include this script after jQuery. Requires jQuery 1.4+.
<scriptsrc='jquery.js'></script><scriptsrc='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({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.
Move.js (recommended!)
- Pros: no jQuery dependency, great syntax.
- Cons (at time of writing): no iOS support (doesn't use
translate3d), someIE bugs, no 3D transforms, no animation queue.
- Pros: transparently overrides
$.fn.animate()to provide CSS transitionssupport. - 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.
© 2011, Rico Sta. Cruz. Released under theMITLicense.
jQuery Transit is authored and maintained byRico Sta. Cruz with helpfrom it'scontributors. It is sponsored by my startup,Sinefunc, Inc.
- My website (ricostacruz.com)
- Sinefunc, Inc. (sinefunc.com)
- Github (@rstacruz)
- Twitter (@rstacruz)
About
Super-smooth CSS3 transformations and transitions for jQuery
Resources
Contributing
Uh oh!
There was an error while loading.Please reload this page.