Created
January 13, 2012 15:56
-
-
Save utgarda/1607103 to your computer and use it in GitHub Desktop.
CoffeeScript + jQuery tutorials: Stacking animations http://coffeequery.blogspot.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $j = jQuery | |
| $j('#ani2_btn1').click -> | |
| $j('#ani2_worm_bar') | |
| .animate(width:78).animate(left:'+=40',width:38) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $j('#ani2_btn2').click -> | |
| $j('#ani2_worm_bar2') | |
| .animate(width:78).animate(left:'+=40',width:38) | |
| .animate(width:78).animate(left:'+=40',width:38) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| go = (bar) -> | |
| bar.animate(width:78).animate(left:'+=40',width:38) | |
| $j('#ani2_gogo_cat').click -> | |
| go go go go go go go go go go go $j('#ani2_worm_bar3') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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.tree-frog {border: 1px solid white; height: 38px; width: 38px; position: absolute} | |
| </style> | |
| <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'> | |
| <br/> | |
| <div style='position: relative; width: 510px; height: 80px; background: #458008'> | |
| <div id='ani2_worm_bar2' class = 'tree-frog' style='background: #FF621D; left: 20px; top:20px'></div> | |
| </div> | |
| <input class='button' id='ani2_gogo' type='button' value='Go Go'> | |
| <input class='button' id='ani2_reset2' type='button' value='Reset'> | |
| <br/> | |
| <div style='position: relative; width: 510px; height: 80px; background: #458008'> | |
| <div id='ani2_worm_bar3' class='tree-frog' style='background: #FF621D; left: 20px; top:20px'></div> | |
| </div> | |
| <input class='button' id='ani2_gogo_cat' type='button' value='Go Go Caterpillar!'> | |
| <input class='button' id='ani2_reset3' type='button' value='Reset'> | |
| <br/> | |
| <script type='text/coffeescript'> | |
| $j = jQuery | |
| $j('#ani2_go').click -> | |
| $j('#ani2_worm_bar').animate(width:78).animate(left:'+=40',width:38) | |
| $j('#ani2_gogo').click -> | |
| $j('#ani2_worm_bar2') | |
| .animate(width:78).animate( left:'+=40', width:38) | |
| .animate(width:78).animate( left:'+=40', width:38) | |
| go = (bar) -> | |
| bar.animate(width:78).animate(left:'+=40',width:38) | |
| $j('#ani2_gogo_cat').click -> | |
| go go go go go go go go go go go $j('#ani2_worm_bar3') | |
| reset = (bar) -> | |
| bar.stop(true, true).animate( left: 20, width:38 ) | |
| $j('#ani2_reset1').click -> reset $j('#ani2_worm_bar') | |
| $j('#ani2_reset2').click -> reset $j('#ani2_worm_bar2') | |
| $j('#ani2_reset3').click -> reset $j('#ani2_worm_bar3') | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>jQuery + CoffeeScript tutorial: animation stacking</title> | |
| <script src="coffee-script.js"></script> | |
| <script src="jquery-1.7.1.js"></script> | |
| </head> | |
| <body> | |
| <style> | |
| div.tree-frog {font-size: 12pt; border: 1px solid white; height: 38px; width: 38px; position: absolute} | |
| </style> | |
| <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 | |
| #Array comprehension, here goes! | |
| 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 | |
| right = (bar) -> bar.animate(width: 78).animate left: '+=40', width: 38 | |
| left = (bar) -> bar.animate(left: '-=40', width: 78).animate width: 38 | |
| $j -> | |
| left left up right right right down down down down bars[0] | |
| right up up up left left up right right right bars[1] | |
| down right right up up up left left up left bars[2] | |
| up up left left down down right down left left bars[3] | |
| down down down right right up up up 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
These provided information was really so nice,thanks for giving that post and the more skills to develop after refer that post. Your articles really impressed for me,because of all information so nice.look what I found School website design uk