jQuery - Ruby Rails - fadeTo淡化所有div

Question

我正在尝试使用jQuery fade来淡化div的背景颜色（错误类），同时保持内部div不变。但在Chrome和Firefox中，“错误”div和内部div中的任何文本都会褪色。在它工作，它只是错误div褪色但其中没有任何div。如何为所有浏览器工作？

简单地说，我不希望任何内部div完全消失。

查看 -

<div class="error" style="display: inline-block;z-index:1;">
<div style="position:relative;z-index:2;">Error: <%= @a[:error] %>
</div>
</div>

html -

<div class="error" style="z-index:1;height=300px;width=500px;">
<div style="position:relative; z-index:2;">Error: some error</div>
</div>

javascript -

$(document).ready(function(){
$(".error").fadeTo("slow",0.20);
});

Answer 1

这种情况正在发生，因为所有元素的默认backgronud实际上都是透明的。内部div的透明背景显示外部div的背景变化。

为了防止这种情况，只需将错误div中的div设为明确的背景，例如：用这个css：

.error div { background: white; }

即。 '在div的类中给出任何div“错误”为白色背景。'

Answer 2

请参阅我的回答here关于使用fadeTo。简单的答案是fadeTo不会让你这样做，因为不透明度适用于所有子孙。使用动画并将背景颜色设置为alpha为0。