jQuery: enfant-élément disparaît avec $ (». Parent_class') des effets d'opacité dans IE

Question

Je possède ce html:

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

avec code 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; 
    } 

Je veux que ce parent et de l'enfant à fondre ensemble, et finir avec l'opacité: 0.50. Firefox fait cela très bien, mais IE donne des problèmes: Quand je fais un fadeIn() ou un fadeTo() ou même simplement j'applique .css ('opacity', '0.50') sur le parent, le parent rend et le fils ne t.

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

-> provoque le fondu du parent mais l'enfant n'apparaît jamais.

-> parent apparaît, aucun enfant

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

-> parent apparaît avec l'opacité, l'enfant ne semble jamais

$('.parent').show() 

-> parent et l'enfant semble très bien (mais sans animation ni transparence). Si je

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

après, le parent obtient l'effet et l'enfant disparaît .

Comment un parent et un enfant peuvent-ils être animés ensemble et partager des propriétés d'opacité?

Answer 1

J'ai eu un certain succès avec la définition de la transparence sur les éléments before-hand, puis en faisant un fadeIn() sur l'élément parent. Si je le fais:

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

cela donne l'effet que je vais pour. Cependant, c'est bizarre, je dois d'abord définir l'opacité sur l'enfant. Si je les mets les deux en même temps

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

ou si je l'ai mis sur le premier parent, quand je fais le fadeIn() l'enfant disparait comme avant.

Answer 2

Pourquoi ne pas essayer spécifier les deux parents et les éléments enfants dans votre sélecteur, en appliquant l'effet/css à la fois en même temps:

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