Start New Discussion within our Web Development Community

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

This article has been dead for over six months. Start a new discussion instead.