Fork me on GitHub
Download 17kb Download (Minified) 2kb gzipped

How to use

Just include this script after jQuery. Requires jQuery 1.4+.
Use $('...').transition instead of jQuery's $('...').animate. It has the same syntax as animate.

Translate (move)

Hover on a demo box to see it in action.

Translate X

$('.box').transition({ x: '90px' });

Translate Y

$('.box').transition({ y: '30px' });

Translate X and Y

$('.box').transition({ x: '200px', y: '20px' });

Available transformations

The following transformations are available. Refer to the README for more information.

Rotation

Rotate

$('.box').transition({ rotate: '30deg' });

Skew

Skew X

$('.box').transition({ skewX: '30deg' });

Skew Y

$('.box').transition({ skewY: '30deg' });

Skew X and Y

$('.box').transition({
    skewX: '30deg',
    skewY: '-30deg'
});

Scale

Scale up 120% size

$('.box').transition({ scale: 1.2 });

Scale 200% horizontally, 150% vertically

$('.box').transition({ scale: [2, 1.5] });

3D rotation (Webkit only)

You may rotate using rotateX and rotateY. Using perspective is optional, but it should always come before rotateX/Y.

Rotate X

$('.box').transition({
    perspective: '100px',
    rotateX: '180deg'
});

Rotate Y

$('.box').transition({
    perspective: '100px',
    rotateY: '180deg'
});

Rotate 3D

$('.box').transition({
    perspective: '100px',
    rotate3d: '1, 1, 0, 180deg'
});

Transitions for other properties

You can animate any available CSS property.

$.fn.transition for any CSS property

$('.box').transition({
    opacity: 0,
    scale: 1.6
});
$('.box').transition({
    marginLeft: '20px',
    height: '80px'
});

Callbacks

$.fn.transition(options, [duration], [easing], [callback]);
$.fn.transition works just like $.fn.animate. You can pass a duration, easing, and callback.

Providing callbacks

$('.box').transition({ x: -100 }, function() {
    $(this).transition({ opacity: 0 });
});

Custom duration

Custom duration (jQuery style)

$('.box').transition({ opacity: 0 }, 'slow');

Custom duration (in milliseconds)

$('.box').transition({ opacity: 0 }, 2000);

Easing

Simply provide a third parameter to $.fn.transition.

Linear

$('.box').transition({ x: 330 }, 500, 'linear');

Ease in

$('.box').transition({ x: 330 }, 500, 'in');

Ease

$('.box').transition({ x: 330 }, 500, 'ease');

Ease out

$('.box').transition({ x: 330 }, 500, 'out');

Ease in-out

$('.box').transition({ x: 330 }, 500, 'in-out');

Snap

$('.box').transition({ x: 330 }, 500, 'snap');

Custom

$('.box').transition({ x: 330 }, 500, 'cubic-bezier(0,0.9,0.3,1)');

Delay

Delay by 400ms

$('.box').transition({ x: -100, delay: 400 });

Alternate easing/duration syntax

You can provide easing and duration in the options instead Great for CoffeeScript.

$('.box').transition({
    x: '100px',
    easing: 'snap',
    duration: '2000ms'
});

Optional units

All units (px, deg, ms, etc) are optional.

$('.box').transition({
    x: 100,
    duration: 2000,
    rotate: 30,
    easing: 'snap'
});

Relative units

jQuery-style relative units are supported. Start your values with either += or -=.

$('.box').transition({
    rotate: '+=30deg',
    x: '+=30'
});

$.fn.css

CSS3 transform properties work with $.fn.css as well.

$('.box').css({
    x: '90px',
    y: '10px',
    rotate: '-10deg'
});

Transform (automatically adds vendor prefixes)

$('.box').css({ transform: 'rotate(40deg)' });

Getting values

$('.box').css({ rotate: '40deg' });
alert($('.box').css('rotate'));
alert($('.box').css('transform'));

Setting transform origins

You can provide transformation origins via $.fn.css. The format is “x y”, where x and y are coordinates in the given element.

$('.box').css({ transformOrigin: '10px 10px' });
$('.box').transition({ rotate: 40, scale: 1.2 });

Chaining / effect queue

Transit uses jQuery’s effect queue by default, exactly like $.fn.animate. This means that transitions will never run in parallel.

$('.box').
    transition({ x: '-40px' }, 250).
    transition({ x: '0px' }, 250).
    transition({ y: '-40px' }, 250).
    transition({ y: '0px' }, 250);

Transitioning from one style to another

You can chain css and transition together (.css({ .. }).transition({ .. })).

$('.box').
    css({ x: '-800px' }).
    transition({ x: 0 });

Browser support

See caniuse.com’s report on CSS transitions. To support Mobile Safari, jQuery Transit uses translate3d and scale3d.

What about older browsers?

jQuery Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation.
Delays and durations will be ignored.

Fallback to frame-based animation

If you would like to fallback to classic animation when transitions aren’t supported
(usually not recommended, may be slow):

// Delegate .transition() calls to .animate()
// if the browser can't do CSS transitions.
if (!$.support.transition)
    $.fn.transition = $.fn.animate;

Setting defaults

// Transit uses the same default as $.fn.animate.
$.fx.speeds._default = 300;
// Default easing is stored in $.cssEase.
$.cssEase._default = 'snap';

Custom easing

Define custom easing aliases in $.cssEase.

$.cssEase['bounce'] = 'cubic-bezier(0,1,0.5,1.3)';
$('.box').transition({ x: 0 }, 500, 'bounce');

Source code

See the annotated source code here. → You may also browse the GitHub repo. →

Upgrading info

All versions of jQuery Transit should be perfectly backward compatible with it's older versions. If you're upgrading from an old version, see the change log → for info on what's changed.

Credits

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

More script and css style : www.htmldrive.net