Z index in javascript animation?

Question

Having a bit of a problem with the z index of some divs in my javascript.

I've used a bit of code from Rob White animates boxes by expanding their margins. It works great apart from the unhover part of the script.

The fiddle here shows what happens.

On hover the divs animate and expand and a class of top is added with a z-index of 9999999

On unhover they shrink again but "pop" behind the neighbouring squares instead of remaining on top. The top class is removed at unhover but this has no bearing on the animation.

It actually only seems to happen at the edges an the bottom right corner is the only one that looks natural. Any assistance would be great.

Answer 1

You need to remove .top after it ends the animation like this

$(this).stop(true, true).animate({
                marginTop: "5px",
                marginBottom: "5px",
                marginLeft: "5px",
                marginRight: "5px"
               }, 800,function(){
                    $(this).removeClass("top");
            });

Fiddle