utgarda/jquery_animation_1.2.html

## jquery_animation_1.2.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery + CoffeeScript tutorial: animation stacking</title>
    <style>
        div.tree-frog {font-size: 12pt; border: 1px solid white; height: 38px; width: 38px; position: absolute}
    </style>
    <script src="coffee-script.js"></script>
    <script src="jquery-1.7.1.js"></script>
</head>

<body>

<div style="position: relative; width: 200px; height: 200px; background:  #458008">
    <div id="ani2_bar0" class="tree-frog" style="background: #FF621D; left: 0; top:0"></div>
    <div id="ani2_bar1" class="tree-frog" style="background: #B1D02C; left: 0; top:160px"></div>
    <div id="ani2_bar2" class="tree-frog" style="background: #D5FA6F; left: 160px; top:160px"></div>
    <div id="ani2_bar3" class="tree-frog" style="background: #89C128; left: 160px; top:0"></div>
    <div id="ani2_bar4" class="tree-frog" style="background: #B42002; left: 80px; top:80px"></div>
</div>

<script type="text/coffeescript">
    $j = jQuery
    bars = ($j "#ani2_bar#{n}" for n in [0..4])

    up = (bar) -> bar.animate(top: '-=40',height: 78).animate height: 38

    down = (bar) ->
        bar.animate
            height: 78
        .animate
            top: '+=40'
            height: 38

    left = (bar) -> bar.animate(width: 78).animate left: '+=40', width: 38
    right = (bar) -> bar.animate(left: '-=40', width: 78).animate width: 38

    $j ->
        #console.log 'ready'
        down bars[0]
        left bars[1]
        up bars[2]
        right bars[3]
        left down bars[4]
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery + CoffeeScript tutorial: animation stacking</title>
	<style>
	div.tree-frog {font-size: 12pt; border: 1px solid white; height: 38px; width: 38px; position: absolute}
	</style>
	<script src="coffee-script.js"></script>
	<script src="jquery-1.7.1.js"></script>
	</head>

	<body>

	<div style="position: relative; width: 200px; height: 200px; background: #458008">
	<div id="ani2_bar0" class="tree-frog" style="background: #FF621D; left: 0; top:0"></div>
	<div id="ani2_bar1" class="tree-frog" style="background: #B1D02C; left: 0; top:160px"></div>
	<div id="ani2_bar2" class="tree-frog" style="background: #D5FA6F; left: 160px; top:160px"></div>
	<div id="ani2_bar3" class="tree-frog" style="background: #89C128; left: 160px; top:0"></div>
	<div id="ani2_bar4" class="tree-frog" style="background: #B42002; left: 80px; top:80px"></div>
	</div>

	<script type="text/coffeescript">
	$j = jQuery
	bars = ($j "#ani2_bar#{n}" for n in [0..4])

	up = (bar) -> bar.animate(top: '-=40',height: 78).animate height: 38

	down = (bar) ->
	bar.animate
	height: 78
	.animate
	top: '+=40'
	height: 38

	left = (bar) -> bar.animate(width: 78).animate left: '+=40', width: 38
	right = (bar) -> bar.animate(left: '-=40', width: 78).animate width: 38

	$j ->
	#console.log 'ready'
	down bars[0]
	left bars[1]
	up bars[2]
	right bars[3]
	left down bars[4]
	</script>

	</body>
	</html>