[jQuery] chained event run order

[godzilla74]

Hi,

I'm messing around with hover in/out and changing the z-index of absolute
positioned images when the hover action is performed.  i.e., hover in,
z-index = 99.  hover out, z-index = 1.  Basically, I want the image I am
hovering over to be on top.  Everything works fine until the hover out
function takes place.  It seems like the z-index command jumps up in the
chain and runs before the animation.  Any suggestions on how to fix this?

Here is the code:

        //hover over the span image to start the function
        $('span.resize').hover(function(){
                        $(this)
                                .stop()
                                .css('z-index','9')
                                .animate({
                                        width:$('span.resize img').width(),
                                        height:$('span.resize img').height()
                                },1000)
                },
                function(){
                        $(this)
                                .css('z-index','1')
                                .animate({
                                        width:oWidth,
                                        height:oHeight
                                },1000)
                });
});
-- 
View this message in context: 
http://www.nabble.com/chained-event-run-order-tp21380215s27240p21380215.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.