jQuery'；s$（'；#divOne'；）。动画（{zIndex:-1000}，2000）不起作用？

我试过jQuery的

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

对于z指数为1000但仍高于其他元素的元素

（如果我使用firebug将其更改为

-1000

，则它将位于其他元素下方）

您无法设置zindex的动画。您可以使用

---

$（“#divOne”）.css（'z-index'，'-1000'）
jQuery尝试在动画的每个步骤上向值添加一个单位。因此，它不是
99
，而是
99px
，当然，它不是有效的
zIndex
值

似乎不可能将jQuery使用的单位设置为一个简单的空白字符串——它要么使用包含在值中的单位（例如
20%
-百分比单位），要么使用
px

幸运的是，您可以使用hack
animate（）
来实现这一点：

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
});

有关
~
的更多信息，请参阅。
您想要达到什么效果？为z索引设置动画不会有多大好处。即使z索引逐渐降低，您也只会注意到在高/低值切换的点上（非动画）发生了变化，并且变得比其他元素小。@munch:我知道这是如何工作的。考虑一堆卡片，一张卡片从堆栈中飘落下来。请注意，只有当有一堆z索引在元素开始位置和-1000之间的卡片时，它才会起作用……是否有文档显示animate（）不适用于z-index？此处的malsup状态不尝试在ie中为z-index设置动画example@munch我也需要这个，因为我有另一个动画正在进行，它使用z索引作为计算页面位置的基础的一部分；更高的z指数==更接近==更大。如果你只是跳转z索引，那么这个计算也会跳转，看起来很糟糕。我认为animate（）应该能够在CSS中设置任何（合理的）动画？（有标量值的东西）嗯，我还没有看到3d浏览器！为z索引设置动画对于这样的事情非常有用：@Bob Kruithof，js甚至没有提到z索引！没有这么说，只是说这对类似的事情非常有用；）这有最低版本的jQuery吗？我只是尝试用jQuery1.2.6实现这一点，但不幸的是，它什么都没做。我尝试添加一个完整的函数，但动画甚至没有调用它。我和Matthew有同样的问题。我使用的是jQuery1.5.1，我可以看到图像切换，但没有动画。如果有人看到这条评论并知道答案，请与世界分享。我尝试了这个解决方案（按原样复制），效果很好：我得到了一个很好的动画，zIndex不是直接单击，而是在定义的时间后更改：完美动画。但是如果我说例如z:1，然后在步骤div.css中（'zIndex'，100）；（或“100”）从1变为100:zIndex不会随着平滑过渡而发生预期的变化。你知道怎么做吗？或者如何修改此示例以使其使用手动值而不是使用~~？谢谢如果您需要手动更改zIndex（当然是一个平滑的动画），而不使用~~选项（我无法根据需要控制和自定义），您可能会发现这个选项很有用：setTimeout（function（）{$（“#product-1”）.css（'zIndex'，'2'）；$（“#product-2”）.css（'zIndex'，'1'）；}，500）;