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

I have created a sample

http://jsbin.com/eqiti3 here we have three divs. Now, what i want to do is: on cl开发者_开发知识库icking 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.

---

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.

---

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

---

Set background:'white'; it is solved for me