jQuery: l'élément enfant disparaît avec les effets d'opacité $ ('. parent_class') dans IE

Question

J'ai ce code HTML:

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

avec quelques 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 souhaite que ce parent et cet enfant se fondent en même temps et qu’ils obtiennent une opacité de 0,50. Firefox le fait très bien, mais IE pose des problèmes: lorsque je fais un fadeIn () ou un fadeTo () ou tout simplement, j'applique simplement .css ('opacity', '0.50') sur le parent, celui-ci est rendu et l'enfant ne le fait pas. t.

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

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

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

- > parent apparait, pas d'enfant

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

- > le parent apparaît avec une opacité, l'enfant n'apparaît jamais

$('.parent').show()

- > parent et enfant semblent très bien (mais sans animation ni transparence). Si je le fais

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

ensuite, le parent obtient l'effet et l'enfant disparaît .

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

Answer 1

J'ai eu du succès avec la définition de la transparence sur les éléments avant de faire ensuite 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 recherché. Cependant, c'est bizarre, je dois d'abord régler l'opacité sur l'enfant. Si je les mets tous les deux en même temps

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

ou si je le place d'abord sur le parent, quand je fais le fadeIn (), l'enfant disparaît comme avant.

Answer 2

Pourquoi ne pas essayer de spécifier les éléments parent et enfant dans votre sélecteur, en appliquant l'effet / css à la fois:

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