[jQuery] chaining animations and pausing for each step

[D A]

In pseudo code, here's what I'm trying to do with some text:

shrinkText.changeText.EnlargeText.

The jQuery I'm using for this:

        $('span#calendarNumber').animate({
                color: '#999',
                fontSize: '12px'
        }, 500 ).html($('#calculatorSampleInPopup1').val()).animate({
                color: '#900',
                fontSize: '40px'
        }, 2500, 'easeOutElastic' );


What happens visually upon triggering this is this:

 - HTML content changes
 - text shrinks
 - text enlarges

I think what is happening is that the first animation is suppose to
span 500 (miliseconds?) but jQuery doesn't pause for that, it just
starts the animating and goes immediate to the second event which is
to change the text.

In otherwords, I think it's triggering correctly, it's just not
producing the visual effect I want.

Is the solution to put a pause of some sort between the first two
events? If so, what's the proper method?

-DA