Check out the animate method. You can use it as a delay by telling it
to animate nothing (or a propery you know the value of) for a
duration. So something like set the opacity to animate to 1, over a
period of 300ms. Since the opacity is presably already 1, it will just
hang there for 300 ms! Since the animations chain, the next one
shouldn't start until the animate is done.
On Sep 10, 3:24 pm, D A <dali...@gmail.com> wrote:
> 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
