jQuery - Compatibility Problem with Internet Explorer 7?

Question

I have this code that dynamically slides up a Div over an image when mouse over it. It works perfectly in Firefox and Google Chrome, but in Internet Explorer 7 everything runs really slow and nothing happen.

The jquery code is this:

jQuery.fn.masque = function(class) {

$(this).hover(function(){
$(this).find(class).stop().animate({height:'100px',opacity: '0.9'},400);
},function () { 
$(this).find(class).stop().animate({height:'0',opacity: '0'}, 300);
});
}
$(document).ready(function(){$('.thumb').masque('.masque');});

The HTML:

<div class="thumb bg25">
    <a href="#"><img src="img/image.jpg" alt="Something" /></a>
        <div class="masque">
            <h3 class="someclass"><a href="#" >Some text here</a></h3>
            <p class="someclass">Some text here</p>
            <p class="someclass">Some text here</p>
        </div>
</div>

And this is the CSS:

.thumb {float:left; margin:0 14px 14px 0; width:126px; height:186px; padding:10px; position:relative;}

.masque{position:absolute; background:#212326; width:118px; bottom:10px; height:0; padding:4px; display:none;}

I;m running it from a local machine, not in a server.

.. so I think I'm doing something wrong and maybe there is an efficient way for achieving this effect. Thanks!!!

Answer 1

Have you tried taking the stop() off? I'm totally shooting in the dark, but I'm thinking that IE7, might be queing the calls differently. I'll test it now.

Update

After testing it I'm getting some wierd errors in IE7 because of the variable named class. That must be some sort of keyword. Try this.

jQuery.fn.masque = function(classSelector) {
        $(this).hover(function(){
                $(this).find(classSelector).stop().animate({height:'100px',opacity: '0.9'},400);
        },function () {
            $(this).find(classSelector).stop().animate({height:'0',opacity: '0'}, 300);
        });
};

Update

have your tried using slideUp and slideDown?

jQuery.fn.masque = function(classSelector) {
    $(this).hover(function(){
        $(this).find(classSelector).slideDown();
    },function () {
        $(this).find(classSelector).slideUp();
    });
};