Queueing jQuery functions on multiple objects.

Use entire document as object to queue animations and other functions on several objects within the document.

by Erik Woods

HTML

<div id="box-1"></div>
<div id="box-2"></div>

<button>Animate Things</button>

<footer>
    <p>Example found from <a href="http://stackoverflow.com/a/6371398" target="_top">Stack Overflow</a> and modified to handle it the way I wanted.</p>
    <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

CSS

button {
    margin: 10px;
    position: absolute;
    top: 150px;
}

div {
    background: #f00;
    height: 100px;
    position: absolute;
    width: 100px;
}

#box-2 {
    background: #000;
    left: 300px;
}

footer{
    background: #ff0;
    border: 0 none;
    border-top: 1px solid #000;
    bottom: 0;
    color: #000;
    padding: 10px;
    position: fixed;
    width: 100%;
}

JavaScript

$('button').click(function() { // click of button
    q = $(document); // instantiate queue object
    $('div').removeAttr('style'); // reset styles
    $(this).text('Reset and Animate'); // change text of button

    q.queue(function() { // add this to queue
        $('#box-1').delay(500).fadeOut(1000, function() { // delay, then fade out red box
            q.dequeue(); // callback is dequeue
        });
    })
    .queue(function() { // add this to queue
        $('#box-2').animate({'left': '0'}, 1000, function() { // animate black box to left
            q.dequeue(); // callback is dequeue
        });
    });

}); // END OF .click()