jQuery: elemento secundario desaparece con efectos de opacidad $ ('. parent_class') en IE

Question

Tengo este html:

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

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

Quiero que este padre y su hijo se desvanezcan juntos y terminen con opacidad: 0.50. Firefox hace esto bien, pero IE da problemas: cuando hago un fadeIn () o fadeTo () o simplemente simplemente aplico .css ('opacity', '0.50') en el padre, el padre se renderiza y el niño no ' t.

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

- > hace que el padre se desvanezca pero el niño nunca aparece.

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

- > padre aparece, no hijo

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

- > el padre aparece con opacidad, el niño nunca aparece

$('.parent').show()

- > padre e hijo parecen estar bien (pero sin animación ni transparencia). Si lo hago

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

después, el padre obtiene el efecto y el hijo desaparece .

¿Cómo se pueden animar juntos padre e hijo y compartir propiedades de opacidad?

Answer 1

He tenido cierto éxito definiendo la transparencia en los elementos de antemano y luego haciendo un fadeIn () en el elemento padre. Si lo hago:

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

esto da el efecto que estoy buscando. Sin embargo, es extraño, primero tengo que establecer la opacidad en el niño. Si los configuro a ambos al mismo tiempo

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

o si lo configuro en el padre primero, cuando hago el fadeIn () el niño desaparece como antes.

Answer 2

¿Por qué no intentar especificar los elementos primarios y secundarios dentro de su selector, aplicando el efecto / css a ambos al mismo tiempo:

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