[jQuery] chained event run order

[jQuery] chained event run order


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.