Question

I have three things I would like to animate: the head, the feet, and the arm. I’m using jQuery and CoffeeScript.

I would like to create a function that animates the head and feet like this:

move_feet: () ->
   feet.animate({
        left: 100
    },{
        duration: 100
    })

move_head: () ->
   head.animate({
        left: 100
    },{
        duration: 100
    })

then when the feet and head are done moving, move the arm.

I tried using the when /then pattern but I don’t think I’m using it correctly.

$.when(move_head(), move_feet()).done(=>
    move_arm()
);

move_feet fires of immediately. What is the proper way to do this?

Answer 1

You’ve got the right idea. When you’re checking on multiple returned promises/deferred’s with $.when, I think you want to use $.then(callback).

$.when(promise1, promise2).then(callback);

should do the trick!

Hope it helps!