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'）时，父渲染和孩子没有'吨。

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

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

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

Answer 2

我在事先定义元素的透明度然后在父元素上执行fadeIn（）方面取得了一些成功。如果我这样做：

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

这给出了我想要的效果。然而，这很奇怪，我必须首先为孩子设置不透明度。如果我同时设置它们

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

或者如果我先将其设置在父级上，当我执行fadeIn（）时，孩子会像以前一样消失。

jQuery：子元素在IE中以$（'。parent_class'）不透明效果消失

2 个答案: