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') 时,父级渲染而子级没有'吨。

$('.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 回答