爲什麼我無法使用jquery設置di​​v的z-index？

Question

我已經創建了一個樣本
http://jsbin.com/eqiti3 這裏我們有三個div。現在，我想要做的是：單擊任何div時，它應該出現在其他div的頂部，然後淡出然後回到其原始位置。這是我在用的：

$(".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); 

}); 

提供$(this).css('z-index',14)僅憑這能夠使股利其他的div過來的。

Answer 1

使用回調

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

的3rd parameter is a callback function，它將運行動畫結束時。

Revision #3 on jsBin。

Answer 2

你的代碼改成這樣：

$(".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); 
    }); 
}); 

你不能鏈方法fadeTo()後.css()，因爲這些fx功能運行asyncronously因此，.css()立即執行。

這就是爲什麼所有fx方法確實提供完成時觸發的回調。

在操作中查看：http://jsbin.com/eqiti3/2/edit

Answer 3

設置背景：'white';它是解決我