jQuery: criança elemento desaparece com $ ('. parent_class') efeitos de opacidade no IE

Question

Eu tenho esse html:

<div class="foo parent">
  <div class="child"></div>
</div>

com algum 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;
    }

Eu quero que este pai e filho a desvanecer-se em conjunto, e acabar com a opacidade: 0,50. Firefox faz isso muito bem, mas IE dá problemas: Quando eu faço uma fadeIn () ou fadeTo () ou apenas até mesmo simplesmente aplicar CSS ( 'opacidade', '0,50') no pai, o pai torna eo doesn criança' t.

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

-.> Faz com que o pai para fade in, mas a criança nunca aparece

$('.parent').fadeIn('fast')

-> aparece pais, nenhuma criança

$('.parent').css('opacity','0.55')
$('.parent').show()

-> aparece pais com opacidade, criança nunca aparece

$('.parent').show()

-> pai e filho aparecem muito bem (mas sem animação ou transparência). Se eu fizer

$('.parent').css('opacity','0.55') or $('.parent').fadeTo('fast', 0.50)

Depois, o pai recebe o efeito e que a criança desaparece .

Como pode um pai e filho ser animado juntos e compartilham propriedades de opacidade?

Answer 1

Eu tive algum sucesso com a definição da transparência sobre os elementos antes de mão e, em seguida, fazendo um fadeIn () sobre o elemento pai. Se eu faço:

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

isso dá o efeito que eu estou indo para. No entanto, é estranho, eu tenho que definir a opacidade sobre a criança em primeiro lugar. Se eu definir os dois ao mesmo tempo

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

ou se eu defini-lo no pai primeiro, quando eu faço o fadeIn () a criança desaparece como antes.

Answer 2

Por que não tentar especificando ambos os elementos pai e filho dentro de seu seletor, aplicar o efeito / css para os dois ao mesmo tempo:

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