CODEWITHSUNDEEP
javascriptjquery
user2045937
user2045937

Reputation: 197

how to execute a function as the other function is executed?

I have found some similar questions but I couldn't related them with my question..

What I am trying is as the progressLine's width is animated animate the bar width

Here is my simple code:

var function1 = $('.progressLine').animate({width:120},500); 
var function2 = $('.bar').animate({width:50,height:50,top:0},500);
$.when(function1).done(function(){
function2;
});

I have tried to do this with jquery When, but they are still animating at the same time.. So how can I animate bar width after animated progressline width?

fiddle: http://jsfiddle.net/mDUkL/3/

Upvotes: 0

Views: 56

Answers (4)

jogesh_pi
jogesh_pi

Reputation: 9782

var function2 = function() { 
    $('.bar').animate({width:50,height:50,top:0},500);
}

I have slightly modified the script with the use of $.Deferred()

var d1 = $.Deferred();

$('.progressLine').animate({width:120},500, function(){
    d1.resolve();
}); 

var function2 = function() {      
    $('.bar').animate({width:50,height:50,top:0},500);
}

$.when( d1 ).then(function(){
    // callback
    function2();
});

http://jsfiddle.net/jogesh_pi/mDUkL/5/

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try,

var function1 = function(){ $('.progressLine').animate({width:120},500, function2); }
var function2 = function(){ $('.bar').animate({width:50,height:50,top:0},500); }

function1();

Upvotes: 3

shyamnathan
shyamnathan

Reputation: 133

use jquery .queue() option to queue animations

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

Use animate Callback in jquery

$('.progressLine').animate({width:120},500 , function() { 

       $('.bar').animate({width:50,height:50,top:0},500);
});

Upvotes: 5

Related Questions