Jumping the queue

Queues—those irritating lines that ensure everyone or everything in them is processed fairly and in the order they arrived. jQuery's animation queue works similarly, only processing each object's animation request, in the order it was assigned to the object. Sometimes special needs and requirements arrive that shouldn't be forced to waste time in the queue.

So far, we've seen how the .animate() function, in addition to CSS properties, can be passed various optional parameters specifying the duration, (slow, fast, or numerical milliseconds) and the type of easing (swing, linear, or plugin extended easing).

The que parameter is a true or false Boolean that can be set if you don't want the animate function to have to wait its turn. For the instances that you'd like an object to have several animations to run in parallel with each other, like sliding and fading at the same time, disabling the queue in your animate function will do the trick.

In order to set the queue option in your code, instead of using the previous syntax we've been working with, you will have to wrap all the other options into a more advanced syntax which clearly labels each optional parameter like so:

.css("height","5px")

.animate({

duration: 4000, easing: "swing", queue: false

The following screenshot shows the post is fading out while changing in height at the same time:

IE3 Find Out More About Us

Where: At Steph's house When: 6pm to 8pm, April 3rd.

If you've been wanting to know more about our organization, but weren't sure where to start or what you can do... duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Posted n Events Leave a corrment Edit rm The Get Together Event

Where: At the usual place

You can see by the previous screenshot that the code we just wrote fades the first .post div in while it's sliding down. If you change false to true, and reload the page, you'll discover that the first .post div slides all the way down to 500 pixels high and then fades in.

Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment