jquery.transit (original) (raw)

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

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' });

$("#box").css({ y: '60px' });

$("#box").css({ translate: [60,30] });

$("#box").css({ rotate: '30deg' });

$("#box").css({ scale: 2 });

$("#box").css({ scale: [2, 1.5] });

$("#box").css({ skewX: '30deg' });

$("#box").css({ skewY: '30deg' });

$("#box").css({ perspective: 100, rotateX: 30 });

$("#box").css({ rotateY: 30 });

$("#box").css({ rotate3d: [1, 1, 0, 45] });

Relative values are supported.

$("#box").css({ rotate: '+=30' });

$("#box").css({ rotate: '-=30' });

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');

$("#box").css('translate');

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);

$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');

$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');

$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});

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

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.

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