jquery - 子 div 不继承父不透明度

Question

<div class="notice_container" id="showMe">
    <div class="notice">some notice!</div>
</div>

JSFiddle here. (点击“运行”看动画)

我需要 .notice 不继承其父 CSS 不透明度。请注意，不透明度是通过 jQuery animate 分配给 .notice_container 的。

$('#showMe').css({
    "opacity": 0,
    "display": "block"
}).animate({
    opacity: .7
}, 1200)

为什么 .notice 继承不透明度？如果我把它放在容器外面，它就会失去淡入效果。我想看到红色盒子完全不透明，黑色容器稍微透明:这可能吗？以及如何？

非常感谢。

---

无效的解决方案 - 这会解决固有问题，但 jQuery 无法为其设置动画。

$('#showMe').css({
    backgroundColor: "rgba(0, 0, 0, 0)",
    "display": "block"
}).animate({
    backgroundColor: "rgba(0, 0, 0, 1)"
}, 1200);

参见:http://jsfiddle.net/Bbw7r/1/

Answer 1

我认为不可能不将元素的不透明度应用于其某些内容。您可以做的是复制包含元素，如下所示:

<div class="notice_container" id="showMe"></div>
<div class="notice_wrapper" id="showMeWrapper">
    <div class="notice">some notice!</div>
</div>

使 #showMe 和 #showMeWrapper 具有相同的尺寸和相同的位置，但让 showMeWrapper 没有任何样式(透明背景，无边框) ， ETC)。仅对 #showMe 元素进行动画处理。如果您希望为尺寸或位置变化设置动画。