test/concurrency.html

<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Test: Concurrency</title>
	<style>
		.square{
			position: relative;
			display: inline-block;
			top:0;
			left:0;
			width: auto;
			height: auto;
			vertical-align: text-bottom;
			color: #fff;
			background-color: #000;
			padding: 20px;
		}
	</style>
</head>
<body>
<div id="square_1" class="square">1</div><br>
<div id="square_2" class="square">2</div><br>
<div id="square_3" class="square">3</div><br>
<script type="text/javascript" src="../fat.js"></script>
<script>

	Fat.animate("#square_1", {
		left: "200px"
	},{
		duration: 2000,
		callback: function(){

			Fat.animate(this, {
				left: 0
			},{
				delay: 2000,
				duration: 2000
			})
		}
	});

	Fat.animate("#square_1", {
		top: "200px"
	},{
		delay: 1000,
		duration: 2000,
		callback: function(){

			Fat.animate(this, {
				top: 400
			},{
				duration: 2000
			})
		}
	});

	// -------------------------------------

	Fat.animate("#square_2", {
		translateX: "200px"
	},{
		duration: 2000,
		callback: function(){

			Fat.animate(this, {
				translateX: 0
			},{
				delay: 2000,
				duration: 2000
			})
		}
	});

	Fat.animate("#square_2", {
		translateY: "200px"
	},{
		delay: 1000,
		duration: 2000,
		callback: function(){

			Fat.animate(this, {
				translateY: 400
			},{
				duration: 2000
			})
		}
	});

	// -------------------------------------

	Fat.create().animate("#square_3", [{
		left: {
			to: "200px",
			duration: 2000
		}
	},{
		left: {
			to: 0,
			delay: 2000,
			duration: 2000
		}
	}]);

	Fat.create().animate("#square_3", [{
		top: {
			to: "200px",
			delay: 1000,
			duration: 2000
		}
	},{
		top: {
			to: 400,
			duration: 2000
		}
	}]);

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