forked from utgarda/coffeequery
/
caterpillars-one.html
36 lines (26 loc) · 1.01 KB
/
caterpillars-one.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
<style>
div.tree-frog {border: 1px solid white; height: 38px; width: 38px; position: absolute}
</style>
</head>
<body>
<div style='position: relative; width: 510px; height: 80px; background: #458008'>
<div id='ani2_worm_bar' class = 'tree-frog' style='background: #FF621D; left: 20px; top:20px'></div>
</div>
<input class='button' id='ani2_go' type='button' value='Go'>
<input class='button' id='ani2_reset1' type='button' value='Reset'>
<script type='text/coffeescript'>
$j = jQuery
$j('#ani2_go').click ->
$j('#ani2_worm_bar').animate(width:78).animate(left:'+=40',width:38)
reset = (bar) ->
bar.stop(true, true).animate( left: 20, width:38 )
$j('#ani2_reset1').click -> reset $j('#ani2_worm_bar')
</script>
</body>
</html>