jQuery: l'elemento figlio scompare con gli effetti di opacità $ ('. parent_class') in IE

Question

Ho questo html:

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

con alcuni 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;
    }

Voglio che questi genitori e figli svaniscano insieme e finiscano con l'opacità: 0,50. Firefox lo fa bene, ma IE dà problemi: quando faccio un fadeIn () o fadeTo () o semplicemente applico .css ('opacità', '0,50') sul genitore, il genitore esegue il rendering e il bambino non lo fa ' t.

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

- > fa sbiadire il genitore ma il bambino non appare mai.

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

- > appare il genitore, nessun figlio

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

- > il genitore appare con opacità, il bambino non appare mai

$('.parent').show()

- > genitore e figlio appaiono benissimo (ma senza animazione o trasparenza). Se lo faccio

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

in seguito, il genitore ottiene l'effetto e il bambino scompare .

In che modo un genitore e un figlio possono essere animati insieme e condividere le proprietà dell'opacità?

Answer 1

Ho avuto un certo successo nel definire prima la trasparenza sugli elementi e poi nel fare un fadeIn () sull'elemento genitore. Se lo faccio:

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

questo dà l'effetto che sto cercando. Comunque è strano, devo prima impostare l'opacità sul bambino. Se li imposto entrambi contemporaneamente

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

o se prima l'ho impostato sul genitore, quando eseguo fadeIn () il bambino scompare come prima.

Answer 2

Perché non provare a specificare gli elementi padre e figlio all'interno del selettore, applicando l'effetto / css a entrambi contemporaneamente:

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