IE8 problems with .animate() of opacity property - descendant remains opaque throughout
Posted
by Fabian
on Stack Overflow
See other posts from Stack Overflow
or by Fabian
Published on 2010-05-29T02:40:47Z
Indexed on
2010/05/29
2:42 UTC
Read the original article
Hit count: 194
Basically I have something like this:
<ul>
<li>
<a>
<div class="trigger-layer"></div>
<div class="title-layer">Text here</div>
<div class="hover-layer"></div>
</a>
</li>
</ul>
I use jQuery to animate the <ul> as follow:
$ul = xxx (where I assign the selector to var $ul)
$ul.animate({opacity: 0}, 1000, function() {$ul.css("display", "none")});
However in IE8, as the <ul> fades off, the <div class="title-layer">Text here</div> remains clear and opaque. Finally the animation ends, the display: none; property is applied onto the <ul> and the text disappears aburptly.
© Stack Overflow or respective owner
