Full Code of rstacruz/jquery.transit for AI

Repository: rstacruz/jquery.transit
Branch: master
Commit: 1c978a0aaa1e
Files: 12
Total size: 49.0 KB

Directory structure:
gitextract_bsd8vw0r/

├── .gitignore
├── CONTRIBUTING.md
├── HISTORY.md
├── NOTES.md
├── README.md
├── bower.json
├── component.json
├── jquery.transit.js
├── package.json
└── test/
    ├── index.html
    ├── style.css
    └── test.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules
site


================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to Transit

Want to get involved? Thanks! There are plenty of ways to help!

## Reporting issues

A bug is a _demonstrable problem_ that is caused by the code in the
repository.

Please read the following guidelines before you [report an issue][issues]:

1. **Use the GitHub issue search** — check if the issue has already been
   reported. If it has been, please comment on the existing issue.

2. **Check if the issue has been fixed** — the latest `master` or
   development branch may already contain a fix.

3. **Isolate the demonstrable problem** — make sure that the code in the
   project's repository is _definitely_ responsible for the issue. Create a
   [reduced test case](http://css-tricks.com/6263-reduced-test-cases/) - an
   extremely simple and immediately viewable example of the issue.

4. **Include a live example** — provide a link to your reduced test case
   when appropriate (e.g. if the issue is related to (front-end technologies).
   Please use [jsFiddle](http://jsfiddle.net) to host examples.

Please try to be as detailed as possible in your report too. What is your
environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? What would you expect to be the outcome? All these
details will help people to assess and fix any potential bugs.

### Example of a good bug report:

> Short and descriptive title
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` (a link to the reduced test case)
>
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).

A good bug report shouldn't leave people needing to chase you up to get further
information that is required to assess or fix the bug.

**[File a bug report][issues]**

## Responding to issues

Feel free to respond to other people's issues! Some people may be reporting 
issues that can easily be solved even without modification to the project's 
code.

You can also help by verifying issues reported.

**[View issues][issues]**

## The 'help wanted' tag

Some [issues] are tagged with the 'help wanted' tag. These issues often:

 - are missing an actual implementation, or
 - need people's help in verifying and replicating the issue, or
 - need test cases.

If you would like to contribute code and don't have any specific issue you want 
to fix, this would be a good place to start looking at!

**[View issues][issues]**

## Pull requests

Good pull requests — patches, improvements, new features — are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits.

If your contribution involves a significant amount of work or substantial
changes to any part of the project, please open an issue to discuss it first.

Please follow this process; it's the best way to get your work included in the
project:

1. [Fork](http://help.github.com/fork-a-repo/) the project.

2. Clone your fork (`git clone
   https://github.com/<your-username>/html5-boilerplate.git`).

3. Add an `upstream` remote (`git remote add upstream
   https://github.com/rstacruz/jquery.transit.git`).

4. Get the latest changes from upstream (e.g. `git pull upstream
   <dev-branch>`).

5. Create a new topic branch to contain your feature, change, or fix (`git
   checkout -b <topic-branch-name>`).

6. Make sure that your changes adhere to the current coding conventions used
   throughout the project - indentation, accurate comments, etc. Please update
   any documentation that is relevant to the change you are making.

7. Commit your changes in logical chunks; use git's [interactive
   rebase](https://help.github.com/articles/interactive-rebase) feature to tidy
   up your commits before making them public. Please adhere to these [git commit
   message
   guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
   or your pull request is unlikely be merged into the main project.

8. Locally merge (or rebase) the upstream branch into your topic branch.

9. Push your topic branch up to your fork (`git push origin
   <topic-branch-name>`).

10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a
    clear title and description. Please mention which browsers you tested in.

## Acknowledgements

This contributing guide has been adapted from [HTML5 boilerplate's guide][g].

[g]: https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md
[issues]: https://github.com/rstacruz/jquery.transit/issues/


================================================
FILE: HISTORY.md
================================================
## v0.9.12 - July 17, 2014

 * Fix browserify builds by using the correct jQuery. ([@dminkovsky], [#201])
 * Fix properties resetting after a transition. ([#204], [#205])

## v0.9.11 - June 23, 2014

 * Add support for `scaleX` and `scaleY`. ([@YousefED], [#192])
 * Add support for npm.
 * Add support for RequireJS and CommonJS.
 * Fix transitionend support for IE10, Chrome, and many others. ([@wambotron], [#103])

Also:

 * Fix `.transition({...}, {queue: false})` not being honored. ([@YousefED], [#192])
 * Remove some redundant code. ([@Bongo], [#165])
 * Docs: Update to support the new docco. ([@francismakes], [#175])
 * Add `easeInCubic` easing. ([@emagnier], [@willblackmore], [#161], [#142])
 * Add test cases for jQuery 2.0+. ([@hankhero], [#155])

The version `0.9.10` was not officially released as it was published prematurely
to npm.

## v0.9.9 - Dec 14, 2012

Many, many thanks to the many [contributors] who made this release happen! This 
is a pre-release of 1.0.

### Fixes and additions:

  * Fix support for jQuery 1.8, IE 10, Firefox 16, Android Jellybean.
  ([#48], [#62], [#63], [#69], [#70], [#71], [#72], [#76], [#77], [#80], [#81], [#82], [#85], [#86], [#90], [#92], [#93])
  * Compatibility with Twitter Bootstrap has been fixed. ([#67])
  * Unprefixed CSS properties are now used if your browser supports them.
  * Account for prefix-free transition end for Mozilla. ([#97])
  * Callbacks should now be called even if duration is `0`. ([#37])
  * Doing `.css('transition', 'transform 1s')` should now properly vendor-prefix 'transform'. ([#84])
  * Added Penner easing splines. ([#44])

### Internal fixes:

  * New test suite.
  * In building the website, use `fl-rocco` instead of `docco`. This removes the dependency. ([#50])

## v0.1.3 - Feb 14, 2012

### Fixed:
  * Fix JS error with undefined `next` function. ([#21])
  * Using `delay: 0` now works. Closes ([#20])
  * More robust checking of 3D transition support. ([#19])
  * Stop rotateX/rotateY/etc from stopping other transitions when it's not
    supported.  ([#15])

### Added:
  * Support Firefox 10 3D transitions. ([#19])

### Changed:
  * Allow disabling using the transitionEnd property.
  (`$.transit.useTransitionEnd = true`)
  * Use the more reliable timers by default. (`useTransitionEnd` now defaults to
      `false`)

## v0.1.2 - Jan 24, 2012

Thanks to code contributors [@ppcano], [@jeduan], [@steckel], [@weotch], and everyone 
who reported issues.

### Fixed:
  * IE8 error about .indexOf. ([#12], [#8])
  * Fix z-layer scaling in Safari. ([#9], [#10])
  * Fix scale elements being unclickable in WebKits. ([#9], [#10])
  * Fix support for `queue: false`. ([#13])
  * Clean up transitions when done. ([#14])
  * Fix disappearing scaled elements in Chrome. ([#11])
  * Fix a bug where the default duration and easing can sometimes not be used.

### Changed:
  * Make code compatible with jsHint. ([#6])

## v0.1.1 - Nov 18, 2011

### Fixed:
  * Only animate what is needed (ie, don't use 'transition-property: all').

## v0.1.0 - Nov 14, 2011

Initial official release.

[contributors]: https://github.com/rstacruz/jquery.transit/contributors

[#201]: https://github.com/rstarcuz/jquery.transit/issues/201
[@dminkovsky]: https://github.com/dminkovsky

[#204]: https://github.com/rstacruz/jquery.transit/issues/204
[#205]: https://github.com/rstacruz/jquery.transit/issues/205
[#192]: https://github.com/rstacruz/jquery.transit/issues/192
[#103]: https://github.com/rstacruz/jquery.transit/issues/103
[#192]: https://github.com/rstacruz/jquery.transit/issues/192
[#165]: https://github.com/rstacruz/jquery.transit/issues/165
[#175]: https://github.com/rstacruz/jquery.transit/issues/175
[#161]: https://github.com/rstacruz/jquery.transit/issues/161
[#142]: https://github.com/rstacruz/jquery.transit/issues/142
[#155]: https://github.com/rstacruz/jquery.transit/issues/155
[#48]: https://github.com/rstacruz/jquery.transit/issues/48
[#62]: https://github.com/rstacruz/jquery.transit/issues/62
[#63]: https://github.com/rstacruz/jquery.transit/issues/63
[#69]: https://github.com/rstacruz/jquery.transit/issues/69
[#70]: https://github.com/rstacruz/jquery.transit/issues/70
[#71]: https://github.com/rstacruz/jquery.transit/issues/71
[#72]: https://github.com/rstacruz/jquery.transit/issues/72
[#76]: https://github.com/rstacruz/jquery.transit/issues/76
[#77]: https://github.com/rstacruz/jquery.transit/issues/77
[#80]: https://github.com/rstacruz/jquery.transit/issues/80
[#81]: https://github.com/rstacruz/jquery.transit/issues/81
[#82]: https://github.com/rstacruz/jquery.transit/issues/82
[#85]: https://github.com/rstacruz/jquery.transit/issues/85
[#86]: https://github.com/rstacruz/jquery.transit/issues/86
[#90]: https://github.com/rstacruz/jquery.transit/issues/90
[#92]: https://github.com/rstacruz/jquery.transit/issues/92
[#93]: https://github.com/rstacruz/jquery.transit/issues/93
[#67]: https://github.com/rstacruz/jquery.transit/issues/67
[#97]: https://github.com/rstacruz/jquery.transit/issues/97
[#37]: https://github.com/rstacruz/jquery.transit/issues/37
[#84]: https://github.com/rstacruz/jquery.transit/issues/84
[#44]: https://github.com/rstacruz/jquery.transit/issues/44
[#50]: https://github.com/rstacruz/jquery.transit/issues/50
[#21]: https://github.com/rstacruz/jquery.transit/issues/21
[#20]: https://github.com/rstacruz/jquery.transit/issues/20
[#19]: https://github.com/rstacruz/jquery.transit/issues/19
[#15]: https://github.com/rstacruz/jquery.transit/issues/15
[#19]: https://github.com/rstacruz/jquery.transit/issues/19
[#12]: https://github.com/rstacruz/jquery.transit/issues/12
[#8]: https://github.com/rstacruz/jquery.transit/issues/8
[#9]: https://github.com/rstacruz/jquery.transit/issues/9
[#10]: https://github.com/rstacruz/jquery.transit/issues/10
[#9]: https://github.com/rstacruz/jquery.transit/issues/9
[#10]: https://github.com/rstacruz/jquery.transit/issues/10
[#13]: https://github.com/rstacruz/jquery.transit/issues/13
[#14]: https://github.com/rstacruz/jquery.transit/issues/14
[#11]: https://github.com/rstacruz/jquery.transit/issues/11
[#6]: https://github.com/rstacruz/jquery.transit/issues/6
[@YousefED]: https://github.com/YousefED
[@wambotron]: https://github.com/wambotron
[@YousefED]: https://github.com/YousefED
[@Bongo]: https://github.com/Bongo
[@francismakes]: https://github.com/francismakes
[@emagnier]: https://github.com/emagnier
[@willblackmore]: https://github.com/willblackmore
[@hankhero]: https://github.com/hankhero
[@ppcano]: https://github.com/ppcano
[@jeduan]: https://github.com/jeduan
[@steckel]: https://github.com/steckel
[@weotch]: https://github.com/weotch


================================================
FILE: NOTES.md
================================================
Developer notes
===============

Testing:

    open test/index.html

Making a new release:

    vim HISTORY.md       # update changelog
    bump *.json *.js     # update version number
    npm publish          # release to npm
    git release v1.0.0   # release to github/bower
    cd site && make      # update the site

Managing the site
-----------------

Make `site/`:

    git clone git@github.com:rstacruz/jquery.transit.git -b gh-pages ./site

Update:

    cd site
    make update   # update from files
    make          # update the site
    make dist     # make dist/ files (uh, should be deprecated)

v1.0.0 to do
------------

 * .transitionStop()
 * use transitionend by default (#184)
 * Update bootstrap compatibility (#143, #67)
 * Redesign the site


================================================
FILE: README.md
================================================
# [jQuery Transit](http://ricostacruz.com/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](http://ricostacruz.com/jquery.transit) for 
examples.

Usage
-----

Just include [jquery.transit.js] after jQuery. Requires jQuery 1.4+.

``` html
<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

[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](https://velocityjs.org)__ (recommended!)

 * Pros: optimized for situations with hundreds of simultaneous transitions. Lots of extra features.

__[Move.js](https://github.com/visionmedia/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](https://github.com/benbarnett/jQuery-Animate-Enhanced)__

* Pros: transparently overrides `$.fn.animate()` to provide CSS transitions 
  support.
* Cons: transparently overrides `$.fn.animate()`. No transformations support.

__[jQuery 2D transformations](https://github.com/heygrady/transform/)__

* Pros: Tons of transformations.
* Cons: No CSS transition support; animates via `fx.step`.

__[jQuery CSS3 rotate](http://plugins.jquery.com/project/Rotate)__

* Pros: simply provides rotation.
* Cons: simply provides rotation. No transitions support.

Support
-------

__Bugs and requests__: submit them through the project's issues tracker.<br>
[![Issues](http://img.shields.io/github/issues/rstacruz/jquery.transit.svg)]( https://github.com/rstacruz/jquery.transit/issues )

__Questions__: ask them at StackOverflow with the tag *jquery-transit*.<br>
[![StackOverflow](http://img.shields.io/badge/stackoverflow-jquery--transit-brightgreen.svg)]( http://stackoverflow.com/questions/tagged/jquery-transit )

__Chat__: join us at gitter.im.<br>
[![Chat](http://img.shields.io/badge/gitter-rstacruz / jquery.transit-brightgreen.svg)]( https://gitter.im/rstacruz/jquery.transit )

Thanks
------

**jQuery Transit** © 2011-2014+, Rico Sta. Cruz. Released under the [MIT License].<br>
Authored and maintained by Rico Sta. Cruz with help from [contributors].

> [ricostacruz.com](http://ricostacruz.com) &nbsp;&middot;&nbsp;
> GitHub [@rstacruz](https://github.com/rstacruz) &nbsp;&middot;&nbsp;
> Twitter [@rstacruz](https://twitter.com/rstacruz)

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

[![npm version](https://img.shields.io/npm/v/jquery.transit.png)](https://npmjs.org/package/jquery.transit "View this project on npm")


================================================
FILE: bower.json
================================================
{
  "name": "jquery.transit",
  "repo": "rstacruz/jquery.transit",
  "description": "Smooth CSS3 transitions and transformations for jQuery.",
  "version": "0.9.12",
  "keywords": [
    "css3",
    "animation",
    "transition"
  ],
  "dependencies": {
    "jquery": "*"
  },
  "development": {},
  "license": "MIT",
  "main": "jquery.transit.js"
}


================================================
FILE: component.json
================================================
{
  "name": "jquery.transit",
  "repo": "rstacruz/jquery.transit",
  "description": "Smooth CSS3 transitions and transformations for jQuery.",
  "version": "0.9.12",
  "keywords": [
    "css3",
    "animation",
    "transition"
  ],
  "dependencies": {
    "component/jquery": "*"
  },
  "development": {},
  "license": "MIT",
  "scripts": [
    "jquery.transit.js"
  ]
}


================================================
FILE: jquery.transit.js
================================================
/*!
 * jQuery Transit - CSS3 transitions and transformations
 * (c) 2011-2014 Rico Sta. Cruz
 * MIT Licensed.
 *
 * http://ricostacruz.com/jquery.transit
 * http://github.com/rstacruz/jquery.transit
 */

/* jshint expr: true */

;(function (root, factory) {

  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory(require('jquery'));
  } else {
    factory(root.jQuery);
  }

}(this, function($) {

  $.transit = {
    version: "0.9.12",

    // Map of $.css() keys to values for 'transitionProperty'.
    // See https://developer.mozilla.org/en/CSS/CSS_transitions#Properties_that_can_be_animated
    propertyMap: {
      marginLeft    : 'margin',
      marginRight   : 'margin',
      marginBottom  : 'margin',
      marginTop     : 'margin',
      paddingLeft   : 'padding',
      paddingRight  : 'padding',
      paddingBottom : 'padding',
      paddingTop    : 'padding'
    },

    // Will simply transition "instantly" if false
    enabled: true,

    // Set this to false if you don't want to use the transition end property.
    useTransitionEnd: false
  };

  var div = document.createElement('div');
  var support = {};

  // Helper function to get the proper vendor property name.
  // (`transition` => `WebkitTransition`)
  function getVendorPropertyName(prop) {
    // Handle unprefixed versions (FF16+, for example)
    if (prop in div.style) return prop;

    var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
    var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);

    for (var i=0; i<prefixes.length; ++i) {
      var vendorProp = prefixes[i] + prop_;
      if (vendorProp in div.style) { return vendorProp; }
    }
  }

  // Helper function to check if transform3D is supported.
  // Should return true for Webkits and Firefox 10+.
  function checkTransform3dSupport() {
    div.style[support.transform] = '';
    div.style[support.transform] = 'rotateY(90deg)';
    return div.style[support.transform] !== '';
  }

  var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

  // Check for the browser's transitions support.
  support.transition      = getVendorPropertyName('transition');
  support.transitionDelay = getVendorPropertyName('transitionDelay');
  support.transform       = getVendorPropertyName('transform');
  support.transformOrigin = getVendorPropertyName('transformOrigin');
  support.filter          = getVendorPropertyName('Filter');
  support.transform3d     = checkTransform3dSupport();

  var eventNames = {
    'transition':       'transitionend',
    'MozTransition':    'transitionend',
    'OTransition':      'oTransitionEnd',
    'WebkitTransition': 'webkitTransitionEnd',
    'msTransition':     'MSTransitionEnd'
  };

  // Detect the 'transitionend' event needed.
  var transitionEnd = support.transitionEnd = eventNames[support.transition] || null;

  // Populate jQuery's `$.support` with the vendor prefixes we know.
  // As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/),
  // we set $.support.transition to a string of the actual property name used.
  for (var key in support) {
    if (support.hasOwnProperty(key) && typeof $.support[key] === 'undefined') {
      $.support[key] = support[key];
    }
  }

  // Avoid memory leak in IE.
  div = null;

  // ## $.cssEase
  // List of easing aliases that you can use with `$.fn.transition`.
  $.cssEase = {
    '_default':       'ease',
    'in':             'ease-in',
    'out':            'ease-out',
    'in-out':         'ease-in-out',
    'snap':           'cubic-bezier(0,1,.5,1)',
    // Penner equations
    'easeInCubic':    'cubic-bezier(.550,.055,.675,.190)',
    'easeOutCubic':   'cubic-bezier(.215,.61,.355,1)',
    'easeInOutCubic': 'cubic-bezier(.645,.045,.355,1)',
    'easeInCirc':     'cubic-bezier(.6,.04,.98,.335)',
    'easeOutCirc':    'cubic-bezier(.075,.82,.165,1)',
    'easeInOutCirc':  'cubic-bezier(.785,.135,.15,.86)',
    'easeInExpo':     'cubic-bezier(.95,.05,.795,.035)',
    'easeOutExpo':    'cubic-bezier(.19,1,.22,1)',
    'easeInOutExpo':  'cubic-bezier(1,0,0,1)',
    'easeInQuad':     'cubic-bezier(.55,.085,.68,.53)',
    'easeOutQuad':    'cubic-bezier(.25,.46,.45,.94)',
    'easeInOutQuad':  'cubic-bezier(.455,.03,.515,.955)',
    'easeInQuart':    'cubic-bezier(.895,.03,.685,.22)',
    'easeOutQuart':   'cubic-bezier(.165,.84,.44,1)',
    'easeInOutQuart': 'cubic-bezier(.77,0,.175,1)',
    'easeInQuint':    'cubic-bezier(.755,.05,.855,.06)',
    'easeOutQuint':   'cubic-bezier(.23,1,.32,1)',
    'easeInOutQuint': 'cubic-bezier(.86,0,.07,1)',
    'easeInSine':     'cubic-bezier(.47,0,.745,.715)',
    'easeOutSine':    'cubic-bezier(.39,.575,.565,1)',
    'easeInOutSine':  'cubic-bezier(.445,.05,.55,.95)',
    'easeInBack':     'cubic-bezier(.6,-.28,.735,.045)',
    'easeOutBack':    'cubic-bezier(.175, .885,.32,1.275)',
    'easeInOutBack':  'cubic-bezier(.68,-.55,.265,1.55)'
  };

  // ## 'transform' CSS hook
  // Allows you to use the `transform` property in CSS.
  //
  //     $("#hello").css({ transform: "rotate(90deg)" });
  //
  //     $("#hello").css('transform');
  //     //=> { rotate: '90deg' }
  //
  $.cssHooks['transit:transform'] = {
    // The getter returns a `Transform` object.
    get: function(elem) {
      return $(elem).data('transform') || new Transform();
    },

    // The setter accepts a `Transform` object or a string.
    set: function(elem, v) {
      var value = v;

      if (!(value instanceof Transform)) {
        value = new Transform(value);
      }

      // We've seen the 3D version of Scale() not work in Chrome when the
      // element being scaled extends outside of the viewport.  Thus, we're
      // forcing Chrome to not use the 3d transforms as well.  Not sure if
      // translate is affectede, but not risking it.  Detection code from
      // http://davidwalsh.name/detecting-google-chrome-javascript
      if (support.transform === 'WebkitTransform' && !isChrome) {
        elem.style[support.transform] = value.toString(true);
      } else {
        elem.style[support.transform] = value.toString();
      }

      $(elem).data('transform', value);
    }
  };

  // Add a CSS hook for `.css({ transform: '...' })`.
  // In jQuery 1.8+, this will intentionally override the default `transform`
  // CSS hook so it'll play well with Transit. (see issue #62)
  $.cssHooks.transform = {
    set: $.cssHooks['transit:transform'].set
  };

  // ## 'filter' CSS hook
  // Allows you to use the `filter` property in CSS.
  //
  //     $("#hello").css({ filter: 'blur(10px)' });
  //
  $.cssHooks.filter = {
    get: function(elem) {
      return elem.style[support.filter];
    },
    set: function(elem, value) {
      elem.style[support.filter] = value;
    }
  };

  // jQuery 1.8+ supports prefix-free transitions, so these polyfills will not
  // be necessary.
  if ($.fn.jquery < "1.8") {
    // ## 'transformOrigin' CSS hook
    // Allows the use for `transformOrigin` to define where scaling and rotation
    // is pivoted.
    //
    //     $("#hello").css({ transformOrigin: '0 0' });
    //
    $.cssHooks.transformOrigin = {
      get: function(elem) {
        return elem.style[support.transformOrigin];
      },
      set: function(elem, value) {
        elem.style[support.transformOrigin] = value;
      }
    };

    // ## 'transition' CSS hook
    // Allows you to use the `transition` property in CSS.
    //
    //     $("#hello").css({ transition: 'all 0 ease 0' });
    //
    $.cssHooks.transition = {
      get: function(elem) {
        return elem.style[support.transition];
      },
      set: function(elem, value) {
        elem.style[support.transition] = value;
      }
    };
  }

  // ## Other CSS hooks
  // Allows you to rotate, scale and translate.
  registerCssHook('scale');
  registerCssHook('scaleX');
  registerCssHook('scaleY');
  registerCssHook('translate');
  registerCssHook('rotate');
  registerCssHook('rotateX');
  registerCssHook('rotateY');
  registerCssHook('rotate3d');
  registerCssHook('perspective');
  registerCssHook('skewX');
  registerCssHook('skewY');
  registerCssHook('x', true);
  registerCssHook('y', true);

  // ## Transform class
  // This is the main class of a transformation property that powers
  // `$.fn.css({ transform: '...' })`.
  //
  // This is, in essence, a dictionary object with key/values as `-transform`
  // properties.
  //
  //     var t = new Transform("rotate(90) scale(4)");
  //
  //     t.rotate             //=> "90deg"
  //     t.scale              //=> "4,4"
  //
  // Setters are accounted for.
  //
  //     t.set('rotate', 4)
  //     t.rotate             //=> "4deg"
  //
  // Convert it to a CSS string using the `toString()` and `toString(true)` (for WebKit)
  // functions.
  //
  //     t.toString()         //=> "rotate(90deg) scale(4,4)"
  //     t.toString(true)     //=> "rotate(90deg) scale3d(4,4,0)" (WebKit version)
  //
  function Transform(str) {
    if (typeof str === 'string') { this.parse(str); }
    return this;
  }

  Transform.prototype = {
    // ### setFromString()
    // Sets a property from a string.
    //
    //     t.setFromString('scale', '2,4');
    //     // Same as set('scale', '2', '4');
    //
    setFromString: function(prop, val) {
      var args =
        (typeof val === 'string')  ? val.split(',') :
        (val.constructor === Array) ? val :
        [ val ];

      args.unshift(prop);

      Transform.prototype.set.apply(this, args);
    },

    // ### set()
    // Sets a property.
    //
    //     t.set('scale', 2, 4);
    //
    set: function(prop) {
      var args = Array.prototype.slice.apply(arguments, [1]);
      if (this.setter[prop]) {
        this.setter[prop].apply(this, args);
      } else {
        this[prop] = args.join(',');
      }
    },

    get: function(prop) {
      if (this.getter[prop]) {
        return this.getter[prop].apply(this);
      } else {
        return this[prop] || 0;
      }
    },

    setter: {
      // ### rotate
      //
      //     .css({ rotate: 30 })
      //     .css({ rotate: "30" })
      //     .css({ rotate: "30deg" })
      //     .css({ rotate: "30deg" })
      //
      rotate: function(theta) {
        this.rotate = unit(theta, 'deg');
      },

      rotateX: function(theta) {
        this.rotateX = unit(theta, 'deg');
      },

      rotateY: function(theta) {
        this.rotateY = unit(theta, 'deg');
      },

      // ### scale
      //
      //     .css({ scale: 9 })      //=> "scale(9,9)"
      //     .css({ scale: '3,2' })  //=> "scale(3,2)"
      //
      scale: function(x, y) {
        if (y === undefined) { y = x; }
        this.scale = x + "," + y;
      },

      // ### skewX + skewY
      skewX: function(x) {
        this.skewX = unit(x, 'deg');
      },

      skewY: function(y) {
        this.skewY = unit(y, 'deg');
      },

      // ### perspectvie
      perspective: function(dist) {
        this.perspective = unit(dist, 'px');
      },

      // ### x / y
      // Translations. Notice how this keeps the other value.
      //
      //     .css({ x: 4 })       //=> "translate(4px, 0)"
      //     .css({ y: 10 })      //=> "translate(4px, 10px)"
      //
      x: function(x) {
        this.set('translate', x, null);
      },

      y: function(y) {
        this.set('translate', null, y);
      },

      // ### translate
      // Notice how this keeps the other value.
      //
      //     .css({ translate: '2, 5' })    //=> "translate(2px, 5px)"
      //
      translate: function(x, y) {
        if (this._translateX === undefined) { this._translateX = 0; }
        if (this._translateY === undefined) { this._translateY = 0; }

        if (x !== null && x !== undefined) { this._translateX = unit(x, 'px'); }
        if (y !== null && y !== undefined) { this._translateY = unit(y, 'px'); }

        this.translate = this._translateX + "," + this._translateY;
      }
    },

    getter: {
      x: function() {
        return this._translateX || 0;
      },

      y: function() {
        return this._translateY || 0;
      },

      scale: function() {
        var s = (this.scale || "1,1").split(',');
        if (s[0]) { s[0] = parseFloat(s[0]); }
        if (s[1]) { s[1] = parseFloat(s[1]); }

        // "2.5,2.5" => 2.5
        // "2.5,1" => [2.5,1]
        return (s[0] === s[1]) ? s[0] : s;
      },

      rotate3d: function() {
        var s = (this.rotate3d || "0,0,0,0deg").split(',');
        for (var i=0; i<=3; ++i) {
          if (s[i]) { s[i] = parseFloat(s[i]); }
        }
        if (s[3]) { s[3] = unit(s[3], 'deg'); }

        return s;
      }
    },

    // ### parse()
    // Parses from a string. Called on constructor.
    parse: function(str) {
      var self = this;
      str.replace(/([a-zA-Z0-9]+)\((.*?)\)/g, function(x, prop, val) {
        self.setFromString(prop, val);
      });
    },

    // ### toString()
    // Converts to a `transition` CSS property string. If `use3d` is given,
    // it converts to a `-webkit-transition` CSS property string instead.
    toString: function(use3d) {
      var re = [];

      for (var i in this) {
        if (this.hasOwnProperty(i)) {
          // Don't use 3D transformations if the browser can't support it.
          if ((!support.transform3d) && (
            (i === 'rotateX') ||
            (i === 'rotateY') ||
            (i === 'perspective') ||
            (i === 'transformOrigin'))) { continue; }

          if (i[0] !== '_') {
            if (use3d && (i === 'scale')) {
              re.push(i + "3d(" + this[i] + ",1)");
            } else if (use3d && (i === 'translate')) {
              re.push(i + "3d(" + this[i] + ",0)");
            } else {
              re.push(i + "(" + this[i] + ")");
            }
          }
        }
      }

      return re.join(" ");
    }
  };

  function callOrQueue(self, queue, fn) {
    if (queue === true) {
      self.queue(fn);
    } else if (queue) {
      self.queue(queue, fn);
    } else {
      self.each(function () {
                fn.call(this);
            });
    }
  }

  // ### getProperties(dict)
  // Returns properties (for `transition-property`) for dictionary `props`. The
  // value of `props` is what you would expect in `$.css(...)`.
  function getProperties(props) {
    var re = [];

    $.each(props, function(key) {
      key = $.camelCase(key); // Convert "text-align" => "textAlign"
      key = $.transit.propertyMap[key] || $.cssProps[key] || key;
      key = uncamel(key); // Convert back to dasherized

      // Get vendor specify propertie
      if (support[key])
        key = uncamel(support[key]);

      if ($.inArray(key, re) === -1) { re.push(key); }
    });

    return re;
  }

  // ### getTransition()
  // Returns the transition string to be used for the `transition` CSS property.
  //
  // Example:
  //
  //     getTransition({ opacity: 1, rotate: 30 }, 500, 'ease');
  //     //=> 'opacity 500ms ease, -webkit-transform 500ms ease'
  //
  function getTransition(properties, duration, easing, delay) {
    // Get the CSS properties needed.
    var props = getProperties(properties);

    // Account for aliases (`in` => `ease-in`).
    if ($.cssEase[easing]) { easing = $.cssEase[easing]; }

    // Build the duration/easing/delay attributes for it.
    var attribs = '' + toMS(duration) + ' ' + easing;
    if (parseInt(delay, 10) > 0) { attribs += ' ' + toMS(delay); }

    // For more properties, add them this way:
    // "margin 200ms ease, padding 200ms ease, ..."
    var transitions = [];
    $.each(props, function(i, name) {
      transitions.push(name + ' ' + attribs);
    });

    return transitions.join(', ');
  }

  // ## $.fn.transition
  // Works like $.fn.animate(), but uses CSS transitions.
  //
  //     $("...").transition({ opacity: 0.1, scale: 0.3 });
  //
  //     // Specific duration
  //     $("...").transition({ opacity: 0.1, scale: 0.3 }, 500);
  //
  //     // With duration and easing
  //     $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');
  //
  //     // With callback
  //     $("...").transition({ opacity: 0.1, scale: 0.3 }, function() { ... });
  //
  //     // With everything
  //     $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() { ... });
  //
  //     // Alternate syntax
  //     $("...").transition({
  //       opacity: 0.1,
  //       duration: 200,
  //       delay: 40,
  //       easing: 'in',
  //       complete: function() { /* ... */ }
  //      });
  //
  $.fn.transition = $.fn.transit = function(properties, duration, easing, callback) {
    var self  = this;
    var delay = 0;
    var queue = true;

    var theseProperties = $.extend(true, {}, properties);

    // Account for `.transition(properties, callback)`.
    if (typeof duration === 'function') {
      callback = duration;
      duration = undefined;
    }

    // Account for `.transition(properties, options)`.
    if (typeof duration === 'object') {
      easing = duration.easing;
      delay = duration.delay || 0;
      queue = typeof duration.queue === "undefined" ? true : duration.queue;
      callback = duration.complete;
      duration = duration.duration;
    }

    // Account for `.transition(properties, duration, callback)`.
    if (typeof easing === 'function') {
      callback = easing;
      easing = undefined;
    }

    // Alternate syntax.
    if (typeof theseProperties.easing !== 'undefined') {
      easing = theseProperties.easing;
      delete theseProperties.easing;
    }

    if (typeof theseProperties.duration !== 'undefined') {
      duration = theseProperties.duration;
      delete theseProperties.duration;
    }

    if (typeof theseProperties.complete !== 'undefined') {
      callback = theseProperties.complete;
      delete theseProperties.complete;
    }

    if (typeof theseProperties.queue !== 'undefined') {
      queue = theseProperties.queue;
      delete theseProperties.queue;
    }

    if (typeof theseProperties.delay !== 'undefined') {
      delay = theseProperties.delay;
      delete theseProperties.delay;
    }

    // Set defaults. (`400` duration, `ease` easing)
    if (typeof duration === 'undefined') { duration = $.fx.speeds._default; }
    if (typeof easing === 'undefined')   { easing = $.cssEase._default; }

    duration = toMS(duration);

    // Build the `transition` property.
    var transitionValue = getTransition(theseProperties, duration, easing, delay);

    // Compute delay until callback.
    // If this becomes 0, don't bother setting the transition property.
    var work = $.transit.enabled && support.transition;
    var i = work ? (parseInt(duration, 10) + parseInt(delay, 10)) : 0;

    // If there's nothing to do...
    if (i === 0) {
      var fn = function(next) {
        self.css(theseProperties);
        if (callback) { callback.apply(self); }
        if (next) { next(); }
      };

      callOrQueue(self, queue, fn);
      return self;
    }

    // Save the old transitions of each element so we can restore it later.
    var oldTransitions = {};

    var run = function(nextCall) {
      var bound = false;

      // Prepare the callback.
      var cb = function() {
        if (bound) { self.unbind(transitionEnd, cb); }

        if (i > 0) {
          self.each(function() {
            this.style[support.transition] = (oldTransitions[this] || null);
          });
        }

        if (typeof callback === 'function') { callback.apply(self); }
        if (typeof nextCall === 'function') { nextCall(); }
      };

      if ((i > 0) && (transitionEnd) && ($.transit.useTransitionEnd)) {
        // Use the 'transitionend' event if it's available.
        bound = true;
        self.bind(transitionEnd, cb);
      } else {
        // Fallback to timers if the 'transitionend' event isn't supported.
        window.setTimeout(cb, i);
      }

      // Apply transitions.
      self.each(function() {
        if (i > 0) {
          this.style[support.transition] = transitionValue;
        }
        $(this).css(theseProperties);
      });
    };

    // Defer running. This allows the browser to paint any pending CSS it hasn't
    // painted yet before doing the transitions.
    var deferredRun = function(next) {
        this.offsetWidth = this.offsetWidth; // force a repaint
        run(next);
    };

    // Use jQuery's fx queue.
    callOrQueue(self, queue, deferredRun);

    // Chainability.
    return this;
  };

  function registerCssHook(prop, isPixels) {
    // For certain properties, the 'px' should not be implied.
    if (!isPixels) { $.cssNumber[prop] = true; }

    $.transit.propertyMap[prop] = support.transform;

    $.cssHooks[prop] = {
      get: function(elem) {
        var t = $(elem).css('transit:transform');
        return t.get(prop);
      },

      set: function(elem, value) {
        var t = $(elem).css('transit:transform');
        t.setFromString(prop, value);

        $(elem).css({ 'transit:transform': t });
      }
    };

  }

  // ### uncamel(str)
  // Converts a camelcase string to a dasherized string.
  // (`marginLeft` => `margin-left`)
  function uncamel(str) {
    return str.replace(/([A-Z])/g, function(letter) { return '-' + letter.toLowerCase(); });
  }

  // ### unit(number, unit)
  // Ensures that number `number` has a unit. If no unit is found, assume the
  // default is `unit`.
  //
  //     unit(2, 'px')          //=> "2px"
  //     unit("30deg", 'rad')   //=> "30deg"
  //
  function unit(i, units) {
    if ((typeof i === "string") && (!i.match(/^[\-0-9\.]+$/))) {
      return i;
    } else {
      return "" + i + units;
    }
  }

  // ### toMS(duration)
  // Converts given `duration` to a millisecond string.
  //
  // toMS('fast') => $.fx.speeds[i] => "200ms"
  // toMS('normal') //=> $.fx.speeds._default => "400ms"
  // toMS(10) //=> '10ms'
  // toMS('100ms') //=> '100ms'  
  //
  function toMS(duration) {
    var i = duration;

    // Allow string durations like 'fast' and 'slow', without overriding numeric values.
    if (typeof i === 'string' && (!i.match(/^[\-0-9\.]+/))) { i = $.fx.speeds[i] || $.fx.speeds._default; }

    return unit(i, 'ms');
  }

  // Export some functions for testable-ness.
  $.transit.getTransitionValue = getTransition;

  return $;
}));


================================================
FILE: package.json
================================================
{
  "name": "jquery.transit",
  "version": "0.9.12",
  "description": "Smooth CSS3 transitions and transformations for jQuery.",
  "main": "jquery.transit.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "mocha"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/rstacruz/jquery.transit.git"
  },
  "keywords": [
    "css3",
    "animation",
    "transition"
  ],
  "author": "Rico Sta. Cruz <hi@ricostacruz.com>",
  "license": "MIT",
  "peerDependencies": {
    "jquery": "*"
  },
  "devDependencies": {
    "chai": "1.9.1",
    "sinon": "1.10.2",
    "jsdom": "0.11.0",
    "coffee-script": "1.7.1"
  },
  "bugs": {
    "url": "https://github.com/rstacruz/jquery.transit/issues"
  },
  "homepage": "http://ricostacruz.com/jquery.transit"
}


================================================
FILE: test/index.html
================================================
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>jQuery Transit tests</title>
  <script>
    /*
     * Dynamic script loading
     */

    (function() {
      var m = location.search.match(/jquery=([^&$]*)/);
      var jQueryVersion = m ? m[1] : "1.8.1";

      function addScript(src) {
        document.write("<scr"+"ipt src='"+src+"'></scr"+"ipt>");
      }

      // Dynamically load jQuery depending on what's passed on get params.
      if (jQueryVersion === "1.9.0b1") {
        addScript("http://code.jquery.com/jquery-1.9.0b1.js");
        addScript("http://code.jquery.com/jquery-migrate-1.0.0b1.js");
      } else {
        addScript("http://ajax.googleapis.com/ajax/libs/jquery/"+jQueryVersion+"/jquery.min.js");
      }
      addScript("../jquery.transit.js");
    })();
  </script>
  
  <script src="test.js"></script>
  <link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class='use'>
    Use:
    <a href='index.html?jquery=2.0.3'>jQ 2.0.3</a>
    <a href='index.html?jquery=1.9.0b1'>jQ 1.9.0b1</a>
    <a href='index.html?jquery=1.8.1'>jQ 1.8</a>
    <a href='index.html?jquery=1.7.0'>jQ 1.7</a>
    <a href='index.html?jquery=1.6.0'>jQ 1.6</a>
    <a href='index.html?jquery=1.5.0'>jQ 1.5</a>
    <button class='play-all'>Play all</button>
  </div>

  <div class='description'>
    <h1>jQuery transit tests</h1>
    <p class='version' id='jquery-version'></p>
    <p>Since there's no reliable programmatic way to test for transitions, this
    is a simple page set up so you can visually inspect effects
    conveniently.</p>
  </div>

  <div class='tests'></div>
  <script>
    group('Transformations');

    test('Translation', function($box) { $box.transition({ x: 20, y: 20 }); });
    test('Rotate', function($box) { $box.transition({ rotate: 45 }); });
    test('Rotate via string', function($box) { $box.transition({ rotate: '45deg' }); });
    test('Skew X', function($box) { $box.transition({ skewX: 30 }); });
    test('Skew Y', function($box) { $box.transition({ skewY: 30 }); });
    test('Skew XY', function($box) { $box.transition({ skewY: 30, skewX: 30 }); });
    test('Scale up', function($box) { $box.transition({ scale: 2 }); });
    test('Scale down', function($box) { $box.transition({ scale: 0.5 }); });

    group('3D transformations');

    test('Rotate X', function($box) {
      $box.transition({
        perspective: '500px',
        rotateX: 180
      });
    });

    test('Rotate Y', function($box) {
      $box.transition({
        perspective: '500px',
        rotateY: 180
      });
    });

    test('Rotate X/Y', function($box) {
      $box.transition({
        perspective: '500px',
        rotateX: 180,
        rotateY: 180
      });
    });


    group('Params');

    test('Delay', function($box) {
      $box.transition({ rotate: 45, delay: 150 });
    });

    test('Delay zero', function($box) {
      $box
        .transition({ x: 50, delay: 0 })
        .transition({ x: 0 });
    });

    test('Ease (should be snappy)', function($box) {
      $box.transition(
        { x: 100 }, 500,
        'cubic-bezier(0,0.9,0.3,1)');
    });

    group('Chaining');

    test('Queueing', function($box) {
      $box
      .transition({ x: 50 })
      .transition({ x: 0 })
      .transition({ y: 50 })
      .transition({ y: 0 });
    });

    test('Duration 0 (should not flicker)', function($box) {
      $box
      .transition({ x: 50 }, 0)
      .transition({ x: 0 }, 0)
      .transition({ y: 50 }, 0);
    });

    group('Callbacks');

    test('2nd param', function($box) {
      $box.transition(
        { rotate: 45 },
        function() { $box.html('OK'); });
    });

    test('3rd param', function($box) {
      $box.transition(
        { rotate: 45 },
        500,
        function() { $box.html('OK'); });
    });

    test('as "complete"', function($box) {
      $box.transition({
        rotate: 45,
        complete: function() { $box.html('OK'); }
      });
    });

    group('Misc');

    test('CSS with Transition', function($box) {
      $box
        .css({ x: -50 })
        .transition({ x: 50 });
    });

    test('Opacity', function($box) {
      $box
        .transition({ opacity: 0 });
    });

    test('Transition of transform (no jump first time)', function($box) {
      $box
        .transition({ transform: "translateX(80px)" });
    });


  </script>
</body>
</html>


================================================
FILE: test/style.css
================================================
* { margin: 0; padding: 0; font-size: 1em; }
html { padding: 40px; background: #e3e3e7; }
body, td, input, textarea { font-family: helvetica neue, sans-serif; font-size: 9pt; color: #444; line-height: 1.4; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
body { padding-top: 50px; }
.use { position: fixed; top: 0; left: 0; right: 0; padding: 20px; border-bottom: solid 1px rgba(0, 0, 0, 0.1); background: rgba(250, 250, 250, 0.9); z-index: 10; }
.test { width: 220px; padding: 20px; float: left; margin: 0 20px 20px 0; background: white; border-radius: 2px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 5px rgba(0, 0, 0, 0.05); }
.test .area { width: auto; height: 100px; margin: 10px 0; position: relative; }
.test:hover { box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 5px rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.15); }
.test h3 { font-size: 1.2em; margin-bottom: 2px; overflow: hidden; line-height: 24px; }
.test h3 em { font-style: normal; font-weight: 200; float: right; color: #37a; font-size: 0.8em; }
.test .box { position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px; width: 32px; height: 32px; line-height: 32px; text-align: center; background: #505070; border-radius: 2px; z-index: 2; color: #ddd; }
.test .ghost { background: #ddd; z-index: 1; box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.03); }
.test pre { font-family: menlo, monospace; font-size: 7pt; padding: 10px; background: #eee; margin: 20px -20px -20px -20px; border-top: solid 1px #ddd; white-space: pre-wrap; line-height: 1.5; }
.group-heading { margin: 20px 0 20px 0; padding-bottom: 10px; border-bottom: dotted 1px #ccc; font-size: 1.6em; clear: both; color: #70a0c0; font-weight: 200; }

.use button { padding: 0 10px; }
.use a, .use button { margin: 0 5px; }

.description { padding-bottom: 20px; border-bottom: dotted 1px #ccc; }
.description h1 { font-size: 2.5em; font-weight: 200; color: #707090; }
.description p { font-size: 1.2em; color: #707090; width: 500px; }
.description .version { margin-bottom: 20px; font-size: 1.2em; font-weight: bold; }


================================================
FILE: test/test.js
================================================
(function($) {
  /* Simple test framework of sorts */


  function addTestEvents ($test) {
    $test.bind('mouseenter play', function() {
      var $test = $(this).closest('.test');
      $test.trigger('reset');
      var $box = $test.find('.box:not(.ghost)');
      var $ghost = $box.clone().addClass('ghost').appendTo($test.find('.area'));
  
      $test.data('code').fn($box, $test);
    });
  
    $test.bind('mouseleave reset', function() {
      var $test = $(this).closest('.test');
      var $ghost = $test.find('.ghost');
      if ($ghost.length) {
        $test.find('.box:not(.ghost)').remove();
        $test.find('.ghost').removeClass('ghost');
      }
    });
  }
  
  $(document).ready(function () {
    $('.play-all').bind('click', function() {
      $('.test').trigger('play');
    });
  });

  function test(name, fn) {
    var i = $('.tests .test').length;
    var $test = $('<div class="test"><h3></h3><div class="area"><div class="box"></div></div><pre class="code"></pre></div>');

    var m = fn.toString().match(/\{([\s\S]*)\}$/);
    var code = m[1];
    code = code.replace(/^\s*|\s*$/g, '');
    code = code.replace(/\n {4}/g, "\n");
    name = name.replace(/\(.*\)/, function(n) { return "<em>"+n.substr(1,n.length-2)+"</em>"; });

    $test.attr('id', 'test-'+i);
    $test.find('h3').html(name);
    $test.find('pre').text(code);
    $test.data('code', {fn: fn});
      addTestEvents($test);

    $('.tests').append($test);
  }

  function group(name) {
    $('.tests').append($('<h4 class="group-heading">').text(name));
  }

  // Show versions
  $(function() {
    $('#jquery-version').html(
      'jQuery: v' + $.fn.jquery + '<br>' +
      'Transit: v' + $.transit.version
    );
  });

  window.group = group;
  window.test  = test;

})(jQuery);