how to delay jquery animations


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:



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




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.


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 ^^.


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

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

Check out the docs on here


Quick example:

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

This article has been dead for over six months: Start a new discussion instead
Start New Discussion
Tags Related to this Article