Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

140 lines (119 sloc) 4.99 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>
<style>
div.green-leaf div {border: 1px solid white; height: 38px; width: 38px; position: absolute}
</style>
<div class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
<div id='ani3_bar0' style='background: #FF621D; left: 0; top:0'></div>
<div id='ani3_bar1' style='background: #B1D02C; left: 0; top:160px'></div>
<div id='ani3_bar2' style='background: #D5FA6F; left: 160px; top:160px'></div>
<div id='ani3_bar3' style='background: #89C128; left: 160px; top:0'></div>
<div id='ani3_bar4' style='background: #B42002; left: 80px; top:80px'></div>
</div>
<input class='button' id='ani3_select' type='button' value='Select divs'>
<input class='button' id='ani3_reset1' type='button' value='Reset'>
<div class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
<div id='ani3_bar5' style='background: #FF621D; left: 0; top:0'></div>
<div id='ani3_bar6' style='background: #B1D02C; left: 0; top:160px'></div>
<div id='ani3_bar7' style='background: #D5FA6F; left: 160px; top:160px'></div>
<div id='ani3_bar8' style='background: #89C128; left: 160px; top:0'></div>
<div id='ani3_bar9' style='background: #B42002; left: 80px; top:80px'></div>
</div>
<input class='button' id='ani3_jump_around' type='button' value='Jump around'>
<input class='button' id='ani3_reset2' type='button' value='Reset'>
<div id="leaf" class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
</div>
<input class='button' id='ani3_long_jumps' type='button' value='4 jumps in a row'>
<div id="leaf2" class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
</div>
<input class='button' id='ani3_round_dance' type='button' value='Round dance!'>
<input class='button' id='ani3_reset3' type='button' value='Reset'>
<script type="text/coffeescript">
$j = jQuery
#Array comprehension, here it goes!
bars = ($j "#ani3_bar#{n}" for n in [0..4])
bars2 = ($j "#ani3_bar#{n}" for n in [5..9])
# Could be done with CSS id selectors, which is
# kinda fast, but has to be 'jQueryfied' for our needs,
# i.e. every HTMLDivElement turned to a jQuery object:
bars = ( $j(e) for e in $j('[id*=ani3_bar]') )
$j('#ani3_select').click ->
b.css('border-color', 'red') for b in bars
$j('#ani3_reset1').click ->
b.css('border-color', 'white') for b in bars
up = (bar) -> bar.animate(top: '-=40',height: 78).animate height: 38
down = (bar) ->
bar.animate
height: 78
.animate
top: '+=40'
height: 38
right = (bar) -> bar.animate(width: 78).animate left: '+=40', width: 38
left = (bar) -> bar.animate(left: '-=40', width: 78).animate width: 38
$j('#ani3_jump_around').click ->
left down right right up up left left down right bars2[4]
$j('#ani3_reset2').click ->
bars2[4].stop(true, true).animate( left: 80, top:80, width:38, height:38 )
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}]
jump: (dir, s) ->
@obj
.animate($aniArgs[dir][0])
.animate($aniArgs[dir][1]) for i in [1..s]
this
right: (n) -> this.jump 'r', n
left: (n) -> this.jump 'l', n
up: (n) -> this.jump 'u', n
down: (n) -> this.jump 'd', n
move: (path) ->
@obj
.animate($aniArgs[dir][0])
.animate($aniArgs[dir][1]) for dir in path
this
frogsData = [
['#FF621D', 0, 0]
['#B1D02C', 0, 160]
['#D5FA6F', 160, 160]
['#89C128', 160, 0]
['#B42002', 80, 80] ]
addFrogs = (leaf) ->
( new Frog( params, leaf ) for params in frogsData )
removeFrogs = (frogs) ->
f.obj.remove() for f in frogs
frogs = addFrogs '#leaf'
$j('#ani3_long_jumps').click ->
frogs[0].down(4).right(4).up(4).left(4)
frogs[1].right(4).up(4).left(4).down(4)
frogs[2].up(4).left(4).down(4).right(4)
frogs[3].left(4).down(4).right(4).up(4)
frogs2 = addFrogs '#leaf2'
$j('#ani3_round_dance').click ->
frogs2[i].move(path) for path, i in [
'ddddrrrull'
'rrrulluuur'
'lulluuurrd'
'lldrddlluu'
'dluuurrddd']
$j('#ani3_reset3').click ->
removeFrogs frogs2
frogs2 = addFrogs '#leaf2'
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.