cho45 · February 20, 2010 12:13
diff --git a/sample3.html b/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>