HELP!!! problems jquery caption slider in IE

[RossBryan]

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:

<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:

.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:

$(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.