> Thanks for the reply Mike. My bad on the code, I forgot to switch it back to
> where the z-index was originally. Here is the actual code for the hoverout:
>
> function(){
> $(this)
> .animate({
> width:oWidth,
> height:oHeight
> },1000)
> .css('z-index','1')
> });
>
> The z-index statement still jumps in front of the animate(), so when the
> image is shrinking back down to original size, the other images in the area
> hop in front of it. I put the example up on my server to show you what I
> mean. The code is all inline too, so you can see everything I have in the
> source.
> http://justinfarmer.com/tests/img_enlargehttp://justinfarmer.com/tests/img_enlarge
>
> Thanks
>
>
>
> malsup wrote:
>
> >> It seems like the z-index command jumps up in the
> >> chain and runs before the animation.
>
> >> $(this)
> >> .css('z-index','1')
> >> .animate({
> >> width:oWidth,
> >> height:oHeight
> >> },1000)
>
> > That's exactly how you've coded it. Your hover-out function resets
> > the zIndex to 1 and then starts the size animation. If you want the
> > zIndex reset to happen when the animation completes then use a
> > callback function with animate.
Like I said before, you want to use a callback to delay the zIndex
change:
var $this = $(this);
$this.animate({
width:oWidth,
height:oHeight
},1000, function() {
$this.css('z-index','1');
});
