Use: jQ 1.9.0b1 jQ 1.8 jQ 1.7 jQ 1.6 jQ 1.5

jQuery transit tests

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.

Transformations

Translation

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

Rotate

$box.transition({ rotate: 45 });

Rotate via string

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

Skew X

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

Skew Y

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

Skew XY

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

Scale up

$box.transition({ scale: 2 });

Scale down

$box.transition({ scale: 0.5 });

3D transformations

Rotate X

$box.transition({

    perspective: '500px',

    rotateX: 180

  });

Rotate Y

$box.transition({

    perspective: '500px',

    rotateY: 180

  });

Rotate X/Y

$box.transition({

    perspective: '500px',

    rotateX: 180,

    rotateY: 180

  });

Params

Delay

$box.transition({ rotate: 45, delay: 150 });

Delay zero

$box

    .transition({ x: 50, delay: 0 })

    .transition({ x: 0 });

Ease should be snappy

$box.transition(

    { x: 100 }, 500,

    'cubic-bezier(0,0.9,0.3,1)');

Chaining

Queueing

$box

  .transition({ x: 50 })

  .transition({ x: 0 })

  .transition({ y: 50 })

  .transition({ y: 0 });

Duration 0 should not flicker

$box

  .transition({ x: 50 }, 0)

  .transition({ x: 0 }, 0)

  .transition({ y: 50 }, 0);

Callbacks

2nd param

$box.transition(

    { rotate: 45 },

    function() { $box.html('OK'); });

3rd param

$box.transition(

    { rotate: 45 },

    500,

    function() { $box.html('OK'); });

as "complete"

$box.transition({

    rotate: 45,

    complete: function() { $box.html('OK'); }

  });

Misc

CSS with Transition

$box

    .css({ x: -50 })

    .transition({ x: 50 });

Opacity

$box

    .transition({ opacity: 0 });