how to delay jquery animations

[suavedesign]

How do I delay an animation in jquery?
I have a <p> in to the page as soon as the page loads. I have another <p> that I want to slide in only after the first <p> finishes coming in, and then I want an image to move when that second <p> is in.
How do I do that? (Right now, they all come in simultaneously)
Here's my code:

$(document).ready(function()
        {
             $('p.title').animate({"left":"300px", 
                                    },1020);


            $('p.subtitle').animate({"left":"370px", 
                                    },1020);

            $('.logo').animate({left: '+=250', bottom: '+=200', height:'140'},1120);


         });

thanks!

[suavedesign]

I added

.delay (2000)

which works for the image.
But it's not a solution for the second <p>, because I dont want it to be on the page at all when the page loads. If I do .delay, you see the text on the page already when the page loads.
I want it to be hidden, and then scroll in after two seconds.
How do I do that?

Thank you.

[minitauros]

If I'm not mistaking, jQuery's animate() function let's you specify a function to execute when the animation finishes. If you put a timeOut in that function that launches your second animation upon timeout, you should see what you want to see, I guess ^^.

[pixelsoul]

There is an option to call another function once the animation has completed.

.animate( properties [, duration ] [, easing ] [, complete ] )

Check out the docs on here http://api.jquery.com/animate/

[pixelsoul]

Quick example:

$('p.title').animate({"left":"300px", },1020,
function() {
    $('p.subtitle').animate({"left":"370px", },1020);
});

http://jsfiddle.net/pixelsoul/khjZq/