jQuery's $('#divOne').animate({zIndex: -1000}, 2000) does not work?

Question

I tried jQuery's

$('#divOne').animate({zIndex: -1000}, 2000)

to that element which has a z-index of 1000, but it is still above the other elements?

(If I use firebug to change it to -1000 then it will be below other elements)

Answer 1

You cannot animate the zindex. Set it using .css.

$("#divOne").css('z-index' , '-1000');

Answer 2

jQuery attempts to add a unit to the value on each step of the animation. So, instead of 99 it'll be 99px which, of course, isn't a valid zIndex value.

It doesn't seem possible to set the unit used by jQuery to simply a blank string -- it'll either take the unit you include in the value (e.g. 20% - percent unit) or it will use px.

Fortunately, you can hack animate() to make this work:

var div = $('#divOne');

$({
    z: ~~div.css('zIndex')
    // ~~ to get an integer, even from non-numerical values like "auto"
}).animate({
    z: -1000
}, {
    step: function() {
        div.css('zIndex', ~~this.z);
    },
    duration: 2000
});

For more info about ~~ see this.