jQuery Global Animation Queue

by b9chris

HTML

<div id=header>Header</div>
<div id=something>Something</div>
<ul id=menu>
    <li>Menu</li>
</ul>
<div class=trigger>Trigger</div>
<button class=button>Button</button>

CSS

body {
    font: 10pt Verdana;
}
#header, #menu, .trigger {
    position: relative;
}

JavaScript

$.globalQueue = {
        queue: function(anim) {
            $('body')
            .queue(function(dequeue) {
                anim()
                .queue(function(innerDequeue) {
                    dequeue();
                    innerDequeue();
                });
            });
            
            return this;
        }
    };

    $(".button").click(function() {
        $.globalQueue
        .queue(function() {
            return $("#header").animate({top: "-50"}, "slow");
        }).queue(function() {
	      return $("#something").animate({height: "hide"}, "slow");
        }).queue(function() {
            return $("ul#menu").animate({top: "20", left: "0"}, "slow");
        }).queue(function() {
            return $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");
        });
    });