Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to wait for one jquery animation to finish before the next one begins?

I have the following jQuery:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

My issue is that both happen at the same time. I would like the div2 animation to start when the first one finishes. I've tried the method below, but it does the same thing:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
....
function ShowDiv(){
   $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
}

How can I make it wait for the first one to finish?

like image 789
Abe Miessler Avatar asked May 24 '11 20:05

Abe Miessler


People also ask

How do you wait for an animation to finish CSS?

Use a transition time of 0.6s when you hover and an animation time of 0.01 when you hover off. This way, the animation will reset itself to its original position pretty much immediately and stop the funky behaviour.

How do you stop the currently running animation in jQuery?

The jQuery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations. Syntax: $(selector).

What is the default easing used for jQuery animation?

An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing , and one that progresses at a constant pace, called linear .

What is the use of the animate () method in jQuery?

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").


2 Answers

http://api.jquery.com/animate/

animate has a "complete" function. You should place the 2nd animation in the complete function of the first.

EDIT: example http://jsfiddle.net/xgJns/

$("#div1").animate({opacity:.1},1000,function(){
    $("#div2").animate({opacity:.1},1000);    
});​
like image 192
James Montagne Avatar answered Sep 18 '22 20:09

James Montagne


$(function(){
    $("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){
    $("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000);
    });
});

http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/

like image 23
Joaquin Avatar answered Sep 18 '22 20:09

Joaquin