Why i am unable to set z-index of div using jquery?

Question

I have created a sample
http://jsbin.com/eqiti3 here we have three divs. Now, what i want to do is: on clicking of any div it should come on the top of other div then fade and then back to its original position. This is what i am using:

$(".box").click( function () {
    var zindex = $(this).css('z-index');     
  /* this too is not working
    $(this).css('z-index',14);  
    $(this).fadeTo ( 'slow', 0.5 ).fadeTo('slow', 1 )
    $(this).css('z-index',zindex);
  */

    $(this).css('z-index',14).fadeTo  ( 'slow', 0.5 ).fadeTo('slow', 1 ).css('z-index',zindex);

} );

provided $(this).css('z-index',14) this alone is capable of making the div to come over other divs.

Answer 1

Use the callback

$(this).css('z-index',14)
    .fadeTo('slow', 0.5 )
    .fadeTo('slow', 1, function(){
        $(this).css('z-index',zindex);
    });

The 3rd parameter is a callback function, it will run when the animation ends.

Revision #3 on jsBin.