jQuery: Kind-Element verschwindet mit $ (‘. parent_class') Opazität Effekte in IE

Question

Ich habe diesen HTML:

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

mit einigen 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;
    }

Das mag ich Eltern und Kind verblassen in zusammen, und mit einer Undurchsichtigkeit Ende: 0.50. Firefox tut dies ganz gut, aber IE gibt Probleme: Wenn ich einen fadeIn tun () oder fadeTo () oder auch einfach anzuwenden css ( ‚Opazität‘, ‚0,50‘) auf dem übergeordneten, die Mutter macht und das Kind doesn‘ t.

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

-> bewirkt, dass die Eltern in verblassen aber das Kind erscheint nie

.

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

-> Mutter erscheint, kein Kind

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

-> Eltern mit einer Undurchsichtigkeit erscheinen, Kind erscheint nie

$('.parent').show()

-> Eltern und Kind erscheinen ganz gut (aber ohne Animation oder Transparenz). Wenn ich das tue

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

Danach erhält der Elternteil die Wirkung und das Kind verschwindet .

Wie kann ein Elternteil und Kind zusammen animiert werden und Opazität Eigenschaften teilen?

Answer 1

Ich habe vor Hand einen gewissen Erfolg bei der Definition der Transparenz auf den Elementen hatte und dann eine fadeIn () auf das übergeordnete Element zu tun. Wenn ich das tue:

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

Dies gibt den Effekt, den ich für gehe. Aber es ist seltsam, ich habe zuerst die Opazität auf das Kind zu setzen. Wenn ich sie setzen beide zur gleichen Zeit

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

oder, wenn ich es auf dem übergeordneten ersten Satz, als ich die fadeIn tun () das Kind verschwindet wie zuvor.

Answer 2

Warum nicht versuchen, sowohl die Eltern und Kind-Elemente innerhalb der Selektor spezifiziert, um die Wirkung / CSS beide zur gleichen Zeit anwenden:

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