jquery - jQuery - Ruby Rails - fadeTo 淡化所有 div

Question

我正在尝试 jQuery fadeTo 淡化 div （错误类）的背景颜色，同时保持内部 div 不变。但是在 Chrome 和 firefox 中，“错误”div 和内部 div 中的任何文本都会褪色。在 IE 中它可以工作，只是错误 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);
});

score 0 · Accepted Answer

发生这种情况是因为所有元素的默认背景实际上是透明的。内层 div 的透明背景显示了外层 div 不断变化的背景。

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

.error div { background: white; }

即'给类“错误”的 div 中的任何 div 一个白色背景。

score 0 · Accepted Answer

在这里查看我关于使用 fadeTo 的回答。简单的答案是 fadeTo 不会让你这样做，因为 opacity 应用于所有子子项。使用动画并将背景颜色设置为 0 的 alpha。

2 回答 2