为什么我无法使用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来过其他div。

Answer 1

使用回调

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

第三个参数是回调函数 ，它将在动画结束时运行。

关于jsBin的修订版＃3 。

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()之后fadeTo() .css()方法，因为那些fx函数是异步运行的，因此， .css()立即执行。

这就是为什么所有fx方法都提供了在完成时触发的回调。

请参阅此操作： http ： //jsbin.com/eqiti3/2/edit

Answer 3

设置背景：'白色'; 它为我解决了