JQuery: Child disappears with $ ('. Parent_class') opacity effects in IE
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 merge together and end up with opacity: 0.50. Firefox does it pretty well, but IE gives problems: when I do fadeIn () or fadeTo () or just simply apply .css ('opacity', '0.50') to the parent, the parent agent and child doesn't.
$('.parent').fadeTo('fast',0.50)
-> makes the parent disappear, but the child never appears.
$('.parent').fadeIn('fast')
-> parent element appears, not child
$('.parent').css('opacity','0.55')
$('.parent').show()
-> parent element appears with opacity, child never appears
$('.parent').show()
-> parent and child render just fine (but no animation or transparency). If i do
$('.parent').css('opacity','0.55') or $('.parent').fadeTo('fast', 0.50)
after that the parent gets the effect and the child disappears.
How can parent and child objects be combined together and share opacity properties?
source to share
I've had some success with defining the transparency of the elements before processing and then using fadeIn () on the parent element. If I do this:
$('.child').css('opacity', '0.50');
$('.parent').css('opacity', '0.50');
$('.parent').fadeIn('fast');
this gives the effect I'm going to do. However this is strange, I have to set the opacity for the child first. If I installed both of them at the same time
$('.child, .parent').css('opacity','0.50');
or if I set it on the parent first, when I do fadeIn (), the child disappears just like before.
source to share