Regarding usage of multiple jquery animate function for single div

Question

from jquery animate doc i found a sample example where multiple animate function is used for single div.

here is sample code

$( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
 .animate({ fontSize: "24px" }, 1500 )
 .animate({ borderRightWidth: "15px" }, 1500 );
});

here i have couple of question about animate function

1) why queue: false why queue is false. what would be the result if queue was true

2) here animate use like animate().animate().animate() this way so all the animate will run parallel or one after one?

Jasper · Accepted Answer · 2012-01-23 18:46:39Z

1) If queue were set to true then each animation would complete before the next one ran.

queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.

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

2) Well queue = false means that they will run together, and queue = true means they will run one after another.

Also you can animate several properties with one .animate() call like this:

$( "#go1" ).click(function(){
    $( "#block1" ).animate({
        width            : "90%",
        fontSize         : "24px",
        borderRightWidth : "15px"
    }, { queue: false, duration: 3000 });
});

But this requires the animations to all have the same duration. These properties will be animated all at once, not one at a time.

Frédéric Hamidi · Accepted Answer · 2012-01-23 18:51:31Z

1

If the queue option is false, the animation will begin immediately even if another animation is currently running (assuming the queues are the same, which is the case in your example). Otherwise, the animation will be queued and will only run when there are no prior effects left in the queue.

That means your example animates the width property of the element without waiting for the current animation (if any) to finish, then waits for that animation (if there was one) to finish, then animates the font-size property, then waits for that animation to finish, then finally animates the border-right-width property.

edited Jan 23, 2012 at 18:51

answered Jan 23, 2012 at 18:40

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Collectives™ on Stack Overflow

Regarding usage of multiple jquery animate function for single div

here i have couple of question about animate function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

here i have couple of question about animate function

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related