IE8 problems with .animate() of opacity property - descendant remains opaque throughout

Question

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.

Answer 1

You have some external markup/styling/script going on here affecting this, using only what you posted works, you can see a demo here: http://jsfiddle.net/r7pwQ/

Are you sure there's no invalid HTML going on? (besides the <div>s inside the anchor, which is invalid as well :) Make sure you're dealing with valid HTML, otherwise IE will do all sorts of random things.