jQuery：IEで$（ '。parent_class'）の不透明度効果により子要素が消える

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)

-＆gt;親はフェードインしますが、子は表示されません。

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

-＆gt;親が表示され、子は表示されません

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

-＆gt;親は不透明で表示され、子は表示されません

$('.parent').show()

-＆gt;親と子は正常に表示されます（ただし、アニメーションも透明度もありません）。もしそうなら

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

その後、親はエフェクトを取得し、子は消えます。

親と子を一緒にアニメーション化し、不透明度プロパティを共有するにはどうすればよいですか

Answer 1

事前に要素の透明度を定義し、親要素でfadeIn（）を実行することに成功しました。もしそうなら：

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

これにより、目的の効果が得られます。しかし、奇妙なことに、まず子供に不透明度を設定する必要があります。両方を同時に設定した場合

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

または最初に親に設定した場合、fadeIn（）を実行すると、子は以前のように消えます。

Answer 2

セレクター内で親要素と子要素の両方を指定せずに、両方にエフェクト/ CSSを同時に適用する理由：

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