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

`` html


`

It is also available via [bower] and [npm].

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

[bower]: http://bower.io/search/?q=jquery.transit
[npm]: http://npmjs.org/package/jquery.transit
[jquery.transit.js]: https://github.com/rstacruz/jquery.transit/blob/master/jquery.transit.js

Transformations
---------------

You can set transformations as you would any CSS property in jQuery.
(Note that you cannot $.fn.animate() them, only set them.)

` javascript
$("#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.

` javascript
$("#box").css({ rotate: '+=30' }); // 30 degrees more
$("#box").css({ rotate: '-=30' }); // 30 degrees less
`

All units are optional.

` javascript
$("#box").css({ x: '30px' });
$("#box").css({ x: 30 });
`

Multiple arguments can be commas or an array.

` javascript
$("#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.)

` javascript
$("#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.

` javascript
$("#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().

` javascript
$("#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.

__Move.js__

* 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: transparently 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.

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.


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

[MIT License]: http://mit-license.org/
[contributors]: http://github.com/rstacruz/jquery.transit/contributors