|
<!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> |