jQuery: child-element disappears with $('.parent_class') opacity effects in IE

Question

I have this html:

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

with some 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;
    }

I want this parent and child to fade in together, and end up with opacity:0.50. Firefox does this just fine, but IE gives trouble: When I do a fadeIn() or fadeTo() or just even simply apply .css('opacity','0.50') on the parent, the parent renders and the child doesn't.

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

--> causes the parent to fade in but the child never appears.

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

--> parent appears, no child

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

--> parent appears with opacity, child never appears

$('.parent').show()

--> parent and child appear just fine (but with no animation or transparency). If I do

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

afterward, the parent gets the effect and the child disappears.

How can a parent and child be animated together and share opacity properties?

Answer 1

I've had some success with defining the transparency on the elements before-hand and then doing a fadeIn() on the parent element. If I do:

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

this gives the effect I'm going for. However it's weird, I have to set the opacity on the child first. If I set them both at the same time

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

or if I set it on the parent first, when I do the fadeIn() the child disappears as before.

Answer 2

Why not try specifying both the parent and child elements within your selector, applying the effect/css to both at the same time:

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