Popularity
7.3
Declining
Activity
0.0
Stable
7,415
263
939

Description

jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.

Refer to the jQuery Transit website for examples.

Code Quality Rank: L2
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: Animations     Css3     Animation     Transition    
Latest version: v0.9.12

jquery.transit alternatives and similar libraries

Based on the "Animations" category.
Alternatively, view jquery.transit alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of jquery.transit or a related project?

Add another 'Animations' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
Sponsored www.saashub.com

README

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

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

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

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

Questions: ask them at StackOverflow with the tag jquery-transit. StackOverflow

Chat: join us at gitter.im. Chat

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

npm version


*Note that all licence references and agreements mentioned in the jquery.transit README section above are relevant to that project's source code only.