我有这个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。 Firefox 做得很好,但 IE 遇到了麻烦:当我在父级上执行 fadeIn() 或 fadeTo() 或什至只是简单地应用 .css('opacity','0.50') 时,父级会呈现,而子级不会呈现t。
$('.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)
之后,父级获得效果,子级消失。
父级和子级如何一起动画并共享不透明度属性?
最佳答案
为什么不尝试在选择器中指定父元素和子元素,同时将效果/CSS 应用于两者:
$('.parent, .child').fadeTo('fast',0.50);
关于jQuery: 子元素消失 $ ('.parent_class' ) IE 中的不透明效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1419198/