jquery_animation_1.1.coffee

<div id="palette" style="width: 510px; height: 80px;">
</div>
<script type="text/coffeescript">
    colors = ['#CCDDBB', '#99CC66', '#88AA66', '#AADDCC', '#66AAAA', '#559999', '#FFFFDD', '#FF9922', '#DD8822', '#AACCDD', '#5599CC', '#4477AA']

    next_square_html = (color) ->
        """
        <div style="background: #{color};
             border: 1px solid grey;
             height: 30px;
             width: 30px;
             margin: 5px;
             float: left"></div>
        """
    squares = ( $( next_square_html colors[num] ).appendTo( $ '#palette' ) for num in [0..11])

    grow = (num) ->
        squares[num].animate
            height: 60
            100 + Math.random() * 1000
            () -> grow ( (num+1) % 12 )
        .animate
            height: 30
            1000 + Math.random() * 4000
    $ ->
        grow 0