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
$("#global .item").click(function(){
    $("#global .item:lt("+($(this).index()+1)+")").animate({right:'+=25px'},400,function(){
    dosomething();
    });
})
    
//So doing something
function dosomething()
{
    console.log("Rest in queue : "+$("#global .item").queue().length);
    if($("#global .item").queue().length>0)
        console.log("IMPOSSIBRU ! The animation is supposed to have ended with a callback !");
}