3 replies [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 32 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

How do I delay an animation in jquery?
I have a

in to the page as soon as the page loads. I have another

that I want to slide in only after the first

finishes coming in, and then I want an image to move when that second

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!

Tags:
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 32 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

I added .delay (2000) which

I added .delay (2000) which works for the image.
But it's not a solution for the second

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

ttkim
ttkim's picture
Offline
newbie
Last seen: 6 years 24 weeks ago
Timezone: GMT-7
Joined: 2013-03-07
Posts: 10
Points: 13

Callback Function

If I'm reading this correctly, you want to have each one come in after the other.

The .animate() method has "complete" function that triggers once the animation is complete. Try this out.

$(document).ready(function()
{
	$('p.title').animate{        //Moving p with class title
		{"left":"300px"},    //The css property we are changing
		1020,                //The duration
		function () {        //Tells what to do after this animation is done
 
			$('p.subtitle').animate(    //Moving p with class subtitle
				{"left":"370px"},   //The css property we are changing
				1020,               //Duration
				function () {       //Callback function
 
					$('.logo').animate({left: '0', bottom: '+=200', height:'140'},1120);
 
				}
			);
 
		}
	);
 });

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 32 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Hi, Thanks for your

Hi,
Thanks for your reply.
Your code works, but here is what my problem is:
I dont want the 'p.subtitle' to be visible until it comes in. Meaning, while 'p.title' is scrolling in, I want p.subtitle to be invisible, until it starts to come in. How can I do that??
Thanks a lot!