Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Super-smooth CSS3 transformations and transitions for jQuery
Branch: master
Pull request Compare This branch is 107 commits behind rstacruz:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
site
.gitignore
HISTORY.md
README.md
Rakefile
jquery.transit.js

README.md

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 this script after jQuery. Requires jQuery 1.4+.

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

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']

Animating - $.fn.transition

$('...').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

Since you can't easily programatically test transitions, you'll need to build the site, open the test suite in your browser, and visually inspect if all transitions work as they should.

Build the site using rake build, then open site/_output/test.html. This builds the minified JS and tests it.

Alternatives

Move.js (recommended!)

  • 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.

jQuery animate enhanced

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

jQuery 2D transformations

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

jQuery CSS3 rotate

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

Acknowledgements

© 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.

Something went wrong with that request. Please try again.