jQuery: criança elemento desaparece com $ ('. parent_class') efeitos de opacidade no IE
Pergunta
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?
Solução 2
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.
Outras dicas
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);