Test Case Boilerplate

Fork this way...

HTML

<div id="global">
    <div class="item i1">Item 01</div>
    <div class="item i2">Item 02</div>
    <div class="item i3">Item 03</div>
    <div class="item i4">Item 04</div>
</div>

CSS

#global {background-color:#ffffcc;border:1px solid #000;width:400px;height:100px;position:relative;}
#global .item {position:absolute;width:100px;height:100px;background-color:#cc44ff;right:-75px;}
#global .item.i3 {right:-50px;background-color:#ff22ee;}
#global .item.i2 {right:-25px;background-color:#22ffee;}
#global .item.i1 {right:0;background-color:#eebb11;}

JavaScript

//Click on one item
var items = $("#global .item");

items.click(function() {
    items.slice(0, $(this).index()+1).animate({
        right: '+=25px'
    }, 400, function() {
        dosomething();
    });
})

//So doing something


function dosomething() {
    console.log( items.queue(), $(this).is( ":animated" ) );
    console.log("Rest in queue : " + items.queue().length);
    if (items.queue().length > 0) console.log("IMPOSSIBRU ! The animation is supposed to have ended with a callback !");
}