The jQuery .delay() method allows you to delay when things occurs. You may wish to pause abit before animation kicks in or wait until another animation occurs before starting the next one.

The .delay() method allows you to set the duration of the delay in milliseconds. For instance a delay of 500 is a half of one second delay. A delay of 4000 is a 4 second delay. Place this duration amount inside the parentheses without quotation marks.

the .delay() method is used in conjuction with other methods and can be placed in between other methods.

$('#balloonsup').click(function(){
    $("[id^=balloon]").css("top","120%");
    $('#balloonred').delay(150).animate({"top":"-200px"},3000);
    $('#balloonblue').delay(210).animate({"top":"-200px"},3000);
    $('#balloongreen').delay(370).animate({"top":"-200px"},3000);
});

<h4 id="balloonsup">Release the balloons</h4>
<img id="balloonred" src="/images/balloonred.png" alt="Red Balloon" />
<img id="balloongreen" src="/images/balloongreen.png" alt="Green Balloon" />
<img id="balloonblue" src="/images/balloonblue.png" alt="Blue Balloon" />

The results: