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

Question

我有这个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)

之后，父级获得效果，子级消失。

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

Answer 1

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

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