2

私はこの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)

その後、親は効果を取得し、子は消えます。

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

4

2 に答える 2

3

セレクター内で親要素と子要素の両方を指定して、効果/CSS を両方に同時に適用してみませんか。

$('.parent, .child').fadeTo('fast',0.50);
于 2009-09-14T00:22:24.140 に答える
0

事前に要素の透明度を定義してから、親要素で fadeIn() を実行することに成功しました。私が行った場合：

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

これにより、私が目指している効果が得られます。しかし、奇妙なことに、最初に子に不透明度を設定する必要があります。両方同時に設定すると

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

または、最初に親に設定すると、fadeIn() を実行すると、子は以前のように消えます。

于 2009-09-14T05:50:59.963 に答える