Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
65 lines (58 sloc) 1.53 KB
<!DOCTYPE html>
<html>
<head>
<title>jQuery + CoffeeScript tutorial: animation stacking
</title>
<script
src='http://coffeescript.org/extras/coffee-script.js'>
</script>
<script
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js'>
</script>
</head>
<body>
<div id='green-leaf'
style='background: #458008;
position: relative;
width: 200px;
height: 200px' ></div>
<script type="text/coffeescript">
$j = jQuery
class Frog
constructor: ([color, left, top], leaf) ->
@obj = $j """<div style='background: #{color};
left: #{left}px;
top:#{top}px;
border: 1px solid white;
height: 38px; width: 38px; position: absolute;'></div>"""
@obj.appendTo leaf
$aniArgs =
u: [{top: '-=40', height: 78},{height: 38}]
d: [{height: 78},{top: '+=40', height: 38}]
l: [{left: '-=40', width: 78}, {width: 38}]
r: [{width: 78}, {left: '+=40', width: 38}]
move: (path) ->
@obj
.animate($aniArgs[dir][0])
.animate($aniArgs[dir][1]) for dir in path
this
leaf = $j '#green-leaf'
#Array comprehension, here it goes!
frogs = ( new Frog( params, leaf ) for params in [
['#FF621D', 0, 0]
['#B1D02C', 0, 160]
['#D5FA6F', 160, 160]
['#89C128', 160, 0]
['#B42002', 80, 80]
])
$j ->
frogs[i].move(path) for path, i in [
'ddddrrrull'
'rrrulluuur'
'lulluuurrd'
'lldrddlluu'
'dluuurrddd']
</script>
</body>
</html>