jQuery：子元素在 IE 中以 $('.parent_class') 不透明度效果消失答案

【问题标题】：jQuery: child-element disappears with $('.parent_class') opacity effects in IEjQuery：子元素在 IE 中以 $('.parent_class') 不透明度效果消失
【发布时间】：2010-11-27 23:58:38
【问题描述】：

我有这个 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;
    }

我希望这个父母和孩子一起淡入，最终得到 opacity: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)

之后，父级获得效果，而子级消失。

如何将父母和孩子一起制作动画并共享不透明度属性？

【问题讨论】：

你使用的是最新的 jQuery 版本吗？

标签： jquery animation effects opacity

【解决方案1】：

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

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

【讨论】：

很好，是的，这可以按预期工作，但前提是我将它们分开，使它们成为兄弟姐妹而不是父母和孩子。我从 display:none; 开始所以看来我需要fadeIn() 而不是fadeTo() （当我从display:none 开始执行fadeTo() 时它们不会出现，它们应该出现吗？）$(.parent,.child').css( 'opacity','0.50') $(.parent,.child').fadeIn('fast') --> 在 IE 中按我想要的方式工作，但前提是它们是兄弟姐妹，否则如果它们是父子上面的孩子不渲染。我可以使用它，但我希望我可以将它们作为父母和兄弟姐妹，因为它有助于定位。
仔细检查后，我真的需要他们是父母兄弟姐妹。这很烦人，我尝试了许多不同的类、定位器、jquery 方法配置。似乎只要我使用 .css 或 .fadeIn() 或 .fadeTo() 给父级透明度，子级就会消失并且无法重新渲染。它不再响应 .show() 或 .css('display','block') 等。如果我按照建议将效果应用于父级或同时应用于两者，就会发生这种情况。如果效果完全应用于父级，则子级消失。

【解决方案2】：

我已经成功地预先定义了元素的透明度，然后在父元素上执行了 fadeIn()。如果我这样做：

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

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

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

或者如果我先在父级上设置它，当我执行fadeIn() 时，子级会像以前一样消失。

【讨论】：