代码之家 › 专栏 › 技术社区 › Purrell

jquery:子元素消失,IE中的$('.parent_class')不透明度效果消失。

opacity effects animation jquery

Purrell · 技术社区 · 16 年前

我有这个HTML:

<div class="foo parent">
  <div class="child"></div>
</div>

一些CSS:

    .foo{ 
         position:absolute; 
         left: -117px;
         background:#000000 none repeat scroll 0 0;
         color:#FFFFFF;
         z-index:8;
     }
    .parent{
         top:23px;
         width:100px;
         height:30px;
         display:none;  #parent and child to start out hidden
     }
    .child{
         position:relative;
         left:94px;
         top:5px;
         height:20px;
         width: 110px;
         background:#000000;
         z-index:9;
    }

我希望这个父母和孩子一起淡入淡出,最终得到不透明度:0.50。火狐做得很好,但IE给了我麻烦:当我在父级上做fadein()或fadeto()或者甚至简单地应用.css(“opacity”,'0.50”)时,父级渲染,而子级不渲染。

$('.parent').fadeTo('fast',0.50)

-->使父级淡入,但子级从未出现。

$('.parent').fadeIn('fast')

-->显示父级,没有子级

$('.parent').css('opacity','0.55')
$('.parent').show()

-->父级显示不透明度,子级从不显示

$('.parent').show()

-->父级和子级看起来很好(但没有动画或透明度)。如果我这样做

$('.parent').css('opacity','0.55') or $('.parent').fadeTo('fast', 0.50)

之后,父母得到效果,孩子消失 .

如何将父级和子级动画在一起并共享不透明度属性?

2 回复 | 直到 16 年前

karim79 16 年前

为什么不尝试在选择器中同时指定父元素和子元素,同时将效果/css应用于这两个元素:

$('.parent, .child').fadeTo('fast',0.50);

Purrell 16 年前

我已经成功地定义了元素的透明度,然后在父元素上执行fadein()。如果我这样做:

$('.child').css('opacity', '0.50');
$('.parent').css('opacity', '0.50');
$('.parent').fadeIn('fast');

这给了我想要的效果。不过这很奇怪,我必须先设置孩子的不透明度。如果我同时设置它们

$('.child, .parent').css('opacity','0.50');

或者,如果我先将其设置在父级上,当我执行fadein()时,子级会像以前一样消失。

推荐文章

camjames · Android Studio中的不透明度级别

8 年前

david · 标题栏中的滑块小部件

8 年前

David C. · 同级元素继承不透明度

8 年前

lulZghost · css不透明度转换不工作

8 年前

paulcook · CSS带渐变遮罩的垂直滚动字幕

8 年前

dzierzak · 谷歌表格图表-如何设置行的透明度?

8 年前

Vandan Shah · 粘性表格标题结构中的不透明度问题

8 年前

Jakob · 禁用(neo)vim中的背景透明度

8 年前

user8646839 · 我可以在Android Google map API中设置多段线不透明度吗

8 年前

Arkadis Stepanov · CSS不透明度在li中不起作用

9 年前