1,105,633 Community Members

how to delay jquery animations

Member Avatar
suavedesign
Junior Poster
135 posts since Dec 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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!

Member Avatar
suavedesign
Junior Poster
135 posts since Dec 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
minitauros
Practically a Master Poster
606 posts since Apr 2011
Reputation Points: 67 [?]
Q&As Helped to Solve: 105 [?]
Skill Endorsements: 6 [?]
 
0
 

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

Member Avatar
pixelsoul
Posting Shark
920 posts since Feb 2011
Reputation Points: 174 [?]
Q&As Helped to Solve: 147 [?]
Skill Endorsements: 25 [?]
 
0
 

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/

Member Avatar
pixelsoul
Posting Shark
920 posts since Feb 2011
Reputation Points: 174 [?]
Q&As Helped to Solve: 147 [?]
Skill Endorsements: 25 [?]
 
0
 

Quick example:

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

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

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