Question

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

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

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?

Answer 1

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.