jQuery - Ruby Rails - fadeTo 淡化所有 div答案

【问题标题】：jQuery - Ruby Rails - fadeTo fades all divjQuery - Ruby Rails - fadeTo 淡化所有 div
【发布时间】：2016-08-22 05:52:25
【问题描述】：

我正在尝试使用 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);
});

【问题讨论】：

标签： jquery ruby-on-rails-3

【解决方案1】：

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

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

.error div { background: white; }

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

【讨论】：

试过了，没有给出预期的结果。可能是我没有正确解释。错误 div 的背景颜色为红色，由 jquery 褪色。内部 div 只有一些黑色文本，我不希望 jquery 褪色。它会保持原样。

【解决方案2】：

请参阅我关于使用 fadeTo 的回答 here。简单的答案是 fadeTo 不会让你这样做，因为 opacity 应用于所有子子项。使用 animate 并将背景颜色设置为 alpha 为 0。

【讨论】：

我认为你最好写下这个老问题的完整答案；然后将新问题标记为重复问题。