Skip to content

Instantly share code, notes, and snippets.

@jbinkleyj

jbinkleyj/jquery_animation_1.2.html

Forked from utgarda/jquery_animation_1.2.html
Created September 22, 2013 10:36
Show Gist options
  • Save jbinkleyj/6658752 to your computer and use it in GitHub Desktop.
Save jbinkleyj/6658752 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment