Edit in JSFiddle

//calling fade function
    var fade1 = $("#box1");
    var fade2 = $("#box2");
    
    step1();
        
    function step1(){
        fade(fade2,0,2000,step2);
    }
    
    function step2(){
        fade(fade1,0,2000,step3);
    }
    
    function step3(){
        alert("done");
    }
    
    //the setTimeout runs function after set amount of time

//custom fade function
function fade(el,fadeVal,pause,callback){

    setTimeout(function(){    
                    
        el.animate({
            opacity : fadeVal
        },{
            duration : "slow",
            queue     : false,
            complete : function(){
                //alert("finished");
                if(callback){
                    callback();
                }
            }
        });
    
    },pause);

}

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

#box1 {
background-color: blue;
width:200px; height:200px;
position:absolute;
z-index: 2;
}

#box2 {
background-color: red;
width:200px; height:200px;
position:absolute;
z-index: 3;
}

#box3 {
background-color: green;
width:200px; height:200px;
position:absolute;
z-index: 1;
}