123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- <!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>
|