Lesson 3: Callbacks

Last time we spoke of stacking animations, that was fun. But what if you want to start doing something with another element when some animation is finished? Asynchronous programming comes in handy not only when calling server side. Let's see how callbacks work for jQuery animations.

Just a few lines of code and we have a MIDI-keyboardish thingie full of colored square keys to click:

	colors = [ '#CCDDBB', '#99CC66', '#88AA66', '#AADDCC'
	'#66AAAA', '#559999', '#FFFFDD', '#FF9922'
	'#DD8822', '#AACCDD', '#5599CC', '#4477AA' ]
	nextSquareHtml = (color) -> """
	<div style="background: #{color}; border: 1px solid grey;
	height: 30px; width: 30px; margin: 5px; float: left"></div>"""
	grow = (square) ->
	square.animate(height: 60, 200).animate height: 30
	for c in colors
	$j(nextSquareHtml c)
	.appendTo( $j '#keyboard' )
	.click -> grow $j(this)

view raw midi-keyboard-1.coffee hosted with ❤ by GitHub

Yes, they are clickable!

Pretty much done already, could employ a couple of swell modern features though. What kind of a midi-keyboard cannot do anything on it's own? Playing sequences after just one touch is a must-have feature, time to code it! Pressing one key will start off a bunch of pitches, as if we pressed some of them sequentially. When launching an animation on a key, we need to know which one goes next. We'll link elements using their data field.

	squares = ( $j(nextSquareHtml c) for c in colors )
	for s,i in squares
	s.appendTo( $j '#keyboard' ) #assembling the keyboard
	.click ->
	grow $j(this), 7
	#attach the next one, make it circular
	.data('next', squares[ (i+1) % squares.length ])

view raw midi-keyboard-2.coffee hosted with ❤ by GitHub

Have a look at jQuery .data, nice one. Now that for each element we know who's next, we can enhance the animation function by adding a callback.

	grow = (square, i) ->
	if i>0 and not square.is ':animated'
	square.animate height: 60, 200,
	-> grow square.data('next'), i-1
	.animate height: 30

view raw midi-keyboard-3.coffee hosted with ❤ by GitHub

Callback practice is over, enjoy the result of all this hard work :)

Source code links:

• MIDI keyboard
• All lessons

Move on to the next lesson!