Change zIndex using animate() or removeclass?
Hey there, I have 4 Div-Boxes next to each other , which, when I move my mouse over them, get bigger.
Looks basically like this: [box1] [box2] [box3] [box4]
The problem is, that when I move over box 1 or 2, they grow BEHIND the other boxes... So, something with the zindex isnt working properly..
I am using the animate function, but I can't seem to use zIndex with animate, because Internet Explorer goes nuts when I do it ...
This was my original code, which didnt work, as IE seems to fuck it up, when using zindex in animate
-
$('.infobox').mouseenter(function() {
$(this).animate( {width: 450, height: 300, zIndex:50},{duration: 'slow', easing: 'easeOutBack'})
}).mouseleave(function() {
$(this).stop().animate( {width:184, height: 170, zIndex:1},{duration: 'slow', easing: 'easeOutBack'});
});
So I thought, I would use addClass() and removeClass(), to change the zIndex.
CSS classes:
.indexontop{
z-index:50;
border: 1px solid #ff0000; /* for testing purpose!! */
}
.infobox{
z-index: 1;
}
-
$('.infobox').mouseenter(function() {
$(this).addClass("indexontop");
$(this).animate( {width: 450, height: 300},{duration: 'slow', easing: 'easeOutBack'})
}).mouseleave(function() {
$(this).stop().animate( {width:184, height: 170},{duration: 'slow', easing: 'easeOutBack'});
$(this).removeClass("indexontop");
});
The problem is, that it does not seem to add that class!!
For testing purpose I added a red border to the .indexontop - Class, but no border appears..
'm stuck!