CodingForums.com - HELP!!! problems jquery caption slider in IE

Hi I'm attempting to achieve a hover overlay effect, listing objects elements using a basic div ul li a img, and I simply want a black overlay with some white text caption to slide in, when hovering over a specific image.

So far I've got the JQuery and CSS caption sliders functionality to behave correctly in modern browsers and even IE8 along with previous versions, but I can't seem to get the caption integrated to function correctly for IE9. The text caption overlay partially shows (as intended), but does not slide up on a hover event.

Heres a JSFiddle example of how it works correctly in the modern browsers:

http://jsfiddle.net/RossB/THS2J/

Can Anybody please shed some light on on any tricks i'm missing?

Here is section of my HTML code:

Code:

<ul>

<div class="featurebox holder">

     <li><img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/Puffins.jpg" alt="events" /></li>

     <div class="cover featuretext">

        <h3 class="date">Day 24th Month</h3>

        <p>Lorem ipsum dolor sit amet,

        consectetur asipisicing elit, sed do

        eiusmod tempor incididunt...<a href="http://webpage.net/events/" target="_BLANK">Read More></a></p>

      </div>

</div>

</ul>

Here is the CSS:

Code:

.featurebox h3{ 

        color:#ffffff;

        margin-top:0px; 

        margin-bottom:0px; 

        padding-left:5px; 

        font:11pt;  

        font-weight: bold;  

    }



.featurebox{ 

        color:#ffffff;

        width: 185px; 

        height: 118px;  

        float:left; 

        /*border: solid 2px #8399AF;*/ 

        overflow: hidden;

        position: relative; 

    }





/*caption para text*/               

.featurebox p{ 

        margin-top:0px;

        padding-left: 5px; 

        padding-right:5px; 

    }



/*caption slider */             

.featuretext{ 

        top:99px;

        float: left; 

        position: absolute; 

        background: #000; 

        height: 100px; 

        width: 100%; 

        opacity: .8; 

        /* For IE 5-7 */

        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

        /* For IE 8 */

        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

    }







.holder .featuretext {

        top: 220;

        left: 0;

    }



.featurebox p a  {

        float: right;

        color:#FFFF00;

    }

And finally the JQuery:

Code:

$(document).ready(function(){   

//Caption Sliding (Partially Hidden to Visible)

    $('.featurebox.holder').hover(function(){

    $(".cover", this).stop().animate({top:'32px'},{queue:false,duration:160});

    }, function() {

        $(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});

    });

});

Any help with this would be much appreciated. Thanks guys.