Hi,
I'm just learning jQuery and working on stuff for fun, but right now,
I am stumped! I have a hover animation happening with 4 small
images. Think of them as being in a small box with some padding to
separate each image. These images are small and absolutely positioned
so i could change the actual size. Just to make sure you know what I
mean, here is the HTML & CSS:
<style>
/* the images are actually much larger, we just want to show a snippet
*/
span.resize{
width:100px;
height:75px;
overflow:hidden;
padding:3px;
}
span#pic1, span#pic2, span#pic3, span#pic4{
position:absolute;
z-index:-1;
}
span#pic1{
margin:0;
}
span#pic2{
margin:0 0 0 110px;
}
span#pic3{
margin:85px 0 0 0;
}
span#pic4{
margin:85px 0 0 110px;
}
</style>
</head>
<body>
<span class="resize" id="pic1"><img src="images/flower1.jpg" /></
span>
<span class="resize" id="pic2"><img src="images/flower2.jpg" /></
span>
<span class="resize" id="pic3"><img src="images/flower2.jpg" /
></span>
<span class="resize" id="pic4"><img src="images/flower3.jpg" /></
span>
</body>
When a user hovers over an image, it actually becomes larger and the z-
index increases to make sure it displays over the other images (which
works fine). However, upon the hover out state, the z-index seems to
jump up in the chain and run before the animation! So, as the image
is going back to it's normal (smaller) state, the other images around
it show up in front as if they have a higher z-index than the hovered-
out image. I don't understand why this is and I can't figure out how
to fix it for the life of me! Any help would be much appreciated!
Here is the jQuery I have thus far:
//original span.resize values that we set in the CSS
var oWidth = $('span.resize').width();
var oHeight = $('span.resize').height();
//hover over the span image to start the function
$('span.resize').hover(function(){
$(this)
.stop()
.css('z-index','99')
.animate({
width:$('span.resize img').width(),
height:$('span.resize img').height()
},1000)
},
function(){
$(this)
.css('z-index','1')
.animate({
width:oWidth,
height:oHeight
},1000)
});
});
Thanks!
