子div不继承父不透明

Question

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

JSFiddle在这里。 (单击"run“查看动画)

我需要.notice不要继承它的父CSS透明度。请注意，不透明是与jQuery动画分配给.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

在这里，我根据我最初的绝对定位记录做了一个快速的示例：

http://jsfiddle.net/Bbw7r/5/

对你来说不太复杂。

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

$('.handle').show().delay(500).fadeTo('slow', 0.7);

(延迟只是为了让你看看发生了什么事)

更新：我错过了队列：

$('.handle').show().animate({opacity: .7}, {queue: false, duration: 1200});
$('.notice').animate({opacity: 1}, {queue: false, duration: 1200});

Answer 2

我认为不对元素的某些内容不透明是不可能的。您可以做的是复制包含元素，如下所示：

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

使#showMe和#showMeWrapper具有相同的尺寸和位置，但使showMeWrapper没有任何样式(透明背景、无边框等)。只动画#showMe元素。如果您希望动画维数或位置更改，则将两者都动画化。

Answer 3

不透明属性--就像我的经验和一些信息一样(如：opacity.asp) --总是继承下来的。

想想看:你想做一些半透明的元素，让它成为opacity=0.5，你希望看到什么呢？从逻辑上讲，所有元素都是半透明的。否则你就得把里面的每一件东西都做成半透明的。

因此，您的示例有两个解决方案：

1. 您可以将notice_container设置为不透明度:1 (100%不透明)，但设置半透明背景色，如下所示： .notice_container {背景颜色: rgba(0，0，0，0.5)；/*半透明黑色*/ }

这个颜色的动画可以用jQuery来实现(它允许对颜色属性进行动画化，但我没有测试它)。

1. 我正在使用其他方法:我的背景和通知块放置在一个级别上，而不是嵌套的。如下所示：

试试看，也许我会更简单。

顺便说一句，如果你想做一个简单的“模态”通知