cho45/sample3.html

## sample3.html
<!DOCTYPE html >
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>JSDeferred / addCommand-like Sample 3</title>
	<style type="text/css" media="screen">
	#wrap {
		border: 1px dashed;
		height: 400px;
		position: relative;
	}

	#wrap img{
		position: absolute;
		top: 0px;
		left: 0px;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
	<script src="http://github.com/cho45/jsdeferred/raw/master/jsdeferred.jquery.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		Deferred.define();

		var img1 = $("#img1"),
			img2 = $("#img2"),
			img3 = $("#img3");
		(function() {
			var callee  = arguments.callee;

			var animate = function (target, prop, speed, easing) {
				return Deferred.connect(target, "animate", { args: [ prop, speed, easing ] });
			};

			Deferred.chain(
				animate(img1, {
					opacity: 0, top: 90 + "px", left: 260 + "px"
					}, 1000, "easeInOutCirc"),
				animate(img2, {
					opacity: 0, top: 170 + "px", left: 450 + "px"
					}, 1000, "easeInOutCirc"),
				animate(img3, {
					opacity: 0, top: 260 + "px", left: 620 + "px"
					}, 1000, "easeInOutCirc"),
				[
					animate(img1, {
						opacity: 1, top: 0 + "px", left: 0 + "px"
						}, 1000, "easeInBack"),
					animate(img2, {
						opacity: 1, top: 0 + "px", left: 0 + "px"
						}, 1000, "easeInBack"),
					animate(img3, {
						opacity: 1, top: 0 + "px", left: 0 + "px"
						}, 1000, "easeInBack")
				],
				function () {
					return wait(0.5).next(callee);
				},
				function error (e) {
					alert(e);
				}
			);
		})();
	});
	</script>
</head>
<body>
	<h1>JSDeferred / addCommand-like Sample 3</h1>
	<p>Inspired from <a href="http://lab.hisasann.com/addCommand/index.html">addCommand.js</a> and its demo <a href="http://lab.hisasann.com/addCommand/demo/sample3.html">Sample3</a></p>
	<div id="wrap">
		<img id="img1" src="http://img.f.hatena.ne.jp/images/fotolife/c/cho45/20100214/20100214145936_120.jpg" width="120px" height="100px">
		<img id="img2" src="http://img.f.hatena.ne.jp/images/fotolife/c/cho45/20100213/20100213150241_120.jpg" width="120px" height="100px">
		<img id="img3" src="http://img.f.hatena.ne.jp/images/fotolife/c/cho45/20100214/20100214150046_120.jpg" width="120px" height="100px">
	</div>
</body>
</html>
	<!DOCTYPE html >
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>JSDeferred / addCommand-like Sample 3</title>
	<style type="text/css" media="screen">
	#wrap {
	border: 1px dashed;
	height: 400px;
	position: relative;
	}

	#wrap img{
	position: absolute;
	top: 0px;
	left: 0px;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
	<script src="http://github.com/cho45/jsdeferred/raw/master/jsdeferred.jquery.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
	Deferred.define();

	var img1 = $("#img1"),
	img2 = $("#img2"),
	img3 = $("#img3");
	(function() {
	var callee = arguments.callee;

	var animate = function (target, prop, speed, easing) {
	return Deferred.connect(target, "animate", { args: [ prop, speed, easing ] });
	};

	Deferred.chain(
	animate(img1, {
	opacity: 0, top: 90 + "px", left: 260 + "px"
	}, 1000, "easeInOutCirc"),
	animate(img2, {
	opacity: 0, top: 170 + "px", left: 450 + "px"
	}, 1000, "easeInOutCirc"),
	animate(img3, {
	opacity: 0, top: 260 + "px", left: 620 + "px"
	}, 1000, "easeInOutCirc"),
	[
	animate(img1, {
	opacity: 1, top: 0 + "px", left: 0 + "px"
	}, 1000, "easeInBack"),
	animate(img2, {
	opacity: 1, top: 0 + "px", left: 0 + "px"
	}, 1000, "easeInBack"),
	animate(img3, {
	opacity: 1, top: 0 + "px", left: 0 + "px"
	}, 1000, "easeInBack")
	],
	function () {
	return wait(0.5).next(callee);
	},
	function error (e) {
	alert(e);
	}
	);
	})();
	});
	</script>
	</head>
	<body>
	<h1>JSDeferred / addCommand-like Sample 3</h1>
	<p>Inspired from <a href="http://lab.hisasann.com/addCommand/index.html">addCommand.js</a> and its demo <a href="http://lab.hisasann.com/addCommand/demo/sample3.html">Sample3</a></p>
	<div id="wrap">
	<img id="img1" src="http://img.f.hatena.ne.jp/images/fotolife/c/cho45/20100214/20100214145936_120.jpg" width="120px" height="100px">
	<img id="img2" src="http://img.f.hatena.ne.jp/images/fotolife/c/cho45/20100213/20100213150241_120.jpg" width="120px" height="100px">
	<img id="img3" src="http://img.f.hatena.ne.jp/images/fotolife/c/cho45/20100214/20100214150046_120.jpg" width="120px" height="100px">
	</div>
	</body>
	</html>