jQuery:IEで$( '。parent_class')の不透明度効果により子要素が消える
質問
この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)
その後、親はエフェクトを取得し、子は消えます。
親と子を一緒にアニメーション化し、不透明度プロパティを共有するにはどうすればよいですか
解決 2
事前に要素の透明度を定義し、親要素でfadeIn()を実行することに成功しました。もしそうなら:
$('.child').css('opacity', '0.50');
$('.parent').css('opacity', '0.50');
$('.parent').fadeIn('fast');
これにより、目的の効果が得られます。しかし、奇妙なことに、まず子供に不透明度を設定する必要があります。両方を同時に設定した場合
$('.child, .parent').css('opacity','0.50');
または最初に親に設定した場合、fadeIn()を実行すると、子は以前のように消えます。
他のヒント
セレクター内で親要素と子要素の両方を指定せずに、両方にエフェクト/ CSSを同時に適用する理由:
$('.parent, .child').fadeTo('fast',0.50);
所属していません StackOverflow