How to execute two jquery animate function in parallel

Question

i know that we can two jquery animate function in parallel like this way

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });
    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});

but my situation is bit different. i have one button and one div whose opacity is set to zero. so div is invisible. i want when a user will click a button then a div will be create dynamically and placed at center. center div size will increase gradually.

so when dynamic div will be placed at center then i need to append my invisible div inside the dynamic div. now i want to increase dynamic div size with animate function and as well as i want to set opacity 1 to invisible child div. so i want these two animation should run parallel.

because when dynamic div resizing will be completed then child div's opacity will also reach at 1. guide me with a small sample how to achieve it.

here is my js fiddle link http://jsfiddle.net/tridip/3jrt48s4/

which anyone can see and understand how i want to animate two div in parallel and those two div's name as follows "UPSContainer", "UPS_rate_time" thanks

Martin Ernst · Accepted Answer · 2014-11-26 17:40:46Z

1

In your fiddle you append the invisible-div to the dynamic-div in the callback-function of the dynamic-div animation. That way the invisible becomes visible only when the animation is finished. Just pull the invisible-div out of the callback and insert it in the main function so both will run simultaneously.

function toggleUPSOverlay(e) {
    if (!data.isAnimating) {
        if ($els.UPSContainer.is(':hidden')) {
            data.isAnimating = true;
            $els.UPSContainer.show();
            // these actions are pulled off the complete-callback and inserted here
            // they are reversed and .appendTo is used so it looks a bit smoother
            $('.UPS_rate_time').fadeIn(800)).appendTo($els.UPSContainer);
            // now the fadeIn and the animate runs simultaneously
            $els.UPSContainer.animate({/* ... */}, {
                duration: 800,
                /* ... */
                complete: function() {
                    data.isAnimating = false; // the only thing left here
                }
            });
        } else {/* ... */}
    }
}

I hope this FIDDLE shows what you want.

edited Nov 26, 2014 at 17:40

answered Nov 26, 2014 at 15:02

Martin Ernst

3,2891 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thomas Over a year ago

i want to do the both at same time like one div will resize and move and child div will change gradually its opacity from 0 to 1. is it possible?

Martin Ernst Over a year ago

You may set fadeIn(800) to get same runtimes. More same time than this isn't possible. Both animations (fade and resize) start at (nearly) same time, and with same duration end at (nearly) same moment.

Thomas Over a year ago

did u update your js fiddle? i voted you for your effort. thanks

Collectives™ on Stack Overflow

How to execute two jquery animate function in parallel

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related