javascript 为什么我无法使用 jquery 设置 div 的 z-index？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3923378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why i am unable to set z-index of div using jquery?
提问by Rakesh Juyal
I have created a sample
http://jsbin.com/eqiti3here 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:
我创建了一个示例
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);
} );
provided $(this).css('z-index',14)this alone is capable of making the div to come over other divs.
如果$(this).css('z-index',14)仅此一项就能够使 div 超过其他 div。
采纳答案by BrunoLM
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.
在第三个参数是一个回调函数，它将运行动画结束时。
回答by jAndy
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 fxfunctions run asyncronously and therefore, .css()was executing immediately.
您不能在.css()之后链接方法fadeTo()，因为这些fx函数是异步运行的，因此会.css()立即执行。
That's why all fxmethods do offer callbacks which fire when finished.
这就是为什么所有fx方法都提供在完成时触发的回调。
See this in action: http://jsbin.com/eqiti3/2/edit
回答by Yuvaraja
Set background:'white'; it is solved for me
设置背景：'白色'; 它为我解决了
