JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Jquery Transit

    Super-smooth CSS3 transformations and transitions for jQuery
    Filed under 

    • 🔾70%Overall
    • 7,432
    • 28.4 days
    • 🕩940
    • 👥18

    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

    Show All