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

change your code to this:

$(".box").click( function () {
   var zindex = $(this).css('z-index');     

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

You can't chain the .css() method after fadeTo(), because those fx functions run asyncronously and therefore, .css() was executing immediately.

That's why all fx methods do offer callbacks which fire when finished.

See this in action: http://jsbin.com/eqiti3/2/edit

Answer 2

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.