Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

163 lines (135 sloc) 4.186 kB
<!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=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 });
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.