为什么我无法使用jquery设置di​​v的z-index？

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 .

Answer 2

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 3

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