jQuery image rotator with text caption, image fades but caption remains... only in ie8
<p>Adding a background rotator (with a caption containing a link) to the background of a site I'm working on.</p>

<p>This is based on the 'Easy jQuery auto image roator'. I've swapped out the unordered list within the 'rotator' div, for a series of sub-divs. In each div that is rotated there is a img and a span with the caption. </p>

<p>It seems to work in all browsers with the exception of ie8. In ie8 the image is rotating as intended, but the captions all stack on top of each other. I've got a pseudo solution in which in addition to a 'show' class that gives a high z-index to the current image/caption div, there is also added a 'hide' class that sets display: none on the caption element, and is applied during the fade-out (which causes the caption to snap off instead of fade out, but is only applied to ie8).</p>

<p>Example: <a href="http://media.acadnet.ca/test/home3/home.html" rel="nofollow">http://media.acadnet.ca/test/home3/home.html</a> (all css is inline for this test, jquery is homerota.js in the same folder).</p>

<p>I tried simply adding the 'hide' class to the fade out function</p>

<pre><code>current.animate({opacity: 0.0}, 3000)
    .removeClass('show')
    .addClass('hide');
</code></pre>

<p>However this causes the block to disappear (the hide class is display:none) before the fade out. Right now I've added this conditional if the browser is ie8 (seems to also hit ie9).</p>

<pre><code>if ($.browser.msie &amp;&amp; navigator.userAgent.indexOf('Trident')!==-1){
    current.animate({opacity: 0.0}, 3000)
    .addClass('hide');
</code></pre>

<p>It seems regardless of whether I handle the caption as a span, another sub-div... ie8 refuses to fade it along with the image. Strange since it seems to work in ie7, ie9, even ie6.</p>

<p>A version that will stack the captions(span class rotext) in ie8 is here (different template, same jQuery minus my pseduo-fix): <a href="http://media.acadnet.ca/test/landing/" rel="nofollow">http://media.acadnet.ca/test/landing/</a></p>

<p>I've looked at some other jQuery rotators that might work, but this will be ending up in a somewhat barbaric cold-fusion CMS that likes to eat certain code that some other jQuery rotators rely on (such as HTML stuck inside a rel tag).</p>

<p>Thanks.</p>
