Test case for jQuery Ticket 4966

z-index animation

by jitter

HTML

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9"></div>
<div id="d10"></div>

CSS

#d1  { z-index: 0; position: absolute; top:  0px; left:  0px; width: 800px; height: 400px; border: 1px solid red;  background-color: green; }
#d2  { z-index: 1; position: absolute; top: 10px; left: 10px; width: 780px; height: 380px; border: 1px solid blue; background-color: white; }
#d3  { z-index: 2; position: absolute; top: 20px; left: 20px; width: 760px; height: 360px; border: 1px solid blue; background-color: white; }
#d4  { z-index: 3; position: absolute; top: 30px; left: 30px; width: 740px; height: 340px; border: 1px solid blue; background-color: white; }
#d5  { z-index: 4; position: absolute; top: 40px; left: 40px; width: 720px; height: 320px; border: 1px solid blue; background-color: white; }
#d6  { z-index: 5; position: absolute; top: 50px; left: 50px; width: 700px; height: 300px; border: 1px solid blue; background-color: white; }
#d7  { z-index: 6; position: absolute; top: 60px; left: 60px; width: 680px; height: 280px; border: 1px solid blue; background-color: white; }
#d8  { z-index: 7; position: absolute; top: 70px; left: 70px; width: 660px; height: 260px; border: 1px solid blue; background-color: white; }
#d9  { z-index: 8; position: absolute; top: 80px; left: 80px; width: 640px; height: 240px; border: 1px solid blue; background-color: white; }
#d10 { z-index: 9; position: absolute; top: 90px; left: 90px; width: 620px; height: 220px; border: 1px solid blue; background-color: white; }

JavaScript

//uncomment the following to make it work
/*
jQuery.fx.step.zIndex = function(fx) {
    fx.unit = "";
    fx.now = Math.floor( fx.now );

    jQuery.fx.step._default( fx );
};
*/

$("#d1").animate({
    "z-index": 10
}, 2500);