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

Question

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

JSFiddle在这里。（点击“运行”看动画）

我不需要.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/

score 2 · Accepted Answer

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

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

制作#showMe并#showMeWrapper具有相同的尺寸和相同的位置，但showMeWrapper没有任何样式（透明背景、无边框等）。#showMe仅对元素进行动画处理。如果您希望为尺寸或位置更改设置动画，请同时为两者设置动画。

score 1 · Accepted Answer

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

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});

score 0 · Accepted Answer

opacity属性-根据我的经验，以及在某些信息中，（例如：http ://www.w3schools.com/cssref/css3_pr_opacity.asp ）-总是被继承。

想一想：你想让一些元素半透明，让它的 opacity=0.5，你希望看到什么？从逻辑上讲，所有元素都是半透明的。否则，您必须使其中的每个项目都半透明。

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

您可以将您的 notice_container 设置为 opacity:1（100% 不透明度），但设置半透明背景色，如下所示：
```
.notice_container
{
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black color */
}
```

这种颜色的动画可以用 jQuery-UI 实现（它允许动画颜色属性，但我没有测试过）

我正在使用其他方法：我的背景和通知块放置在一个级别，而不是嵌套。像这样：

<style>
/* Style for shadow */
.notice_shadow
{
  position:fixed;
  z-index:9000;
  left:0px; right:0px; top:0px; bottom:0px;
  background: black;
  opacity:0.7;
  display:none;
}
/* Style for notice itself */
.notice
{
  position:fixed;
  z-index:9001;
  left:50%; top:50%; /* centering notice in the center of the screen */
  width:200px;
  height:100px;
  margin-left:-100px; /* the second part of parameters used for centering*/
  margin-top:-50px;
  background: red;
  color:white;
  display:none;
}
</style>
<script>
$(function(){
   $('.notice').fadeIn(1000);
   $('.notice_shadow').fadeIn(1000);
});
</script>
<div class='notice_shadow'></div>
<div class='notice'>Hello, this is a notice!</div>

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

而且，顺便说一句，如果您尝试制作简单的“模态”通知 - 有很多可供使用的实现，例如https://github.com/samdark/the-modal（不是我自己的，只是一个好的一）

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

3 回答 3

Related

Reference