jQuery $('#divOne').animate({z Index: -1000}, 2000) 不起作用？答案

【问题标题】：jQuery's $('#divOne').animate({zIndex: -1000}, 2000) does not work?jQuery $('#divOne').animate({z Index: -1000}, 2000) 不起作用？
【发布时间】：2011-03-08 13:35:30
【问题描述】：

我试过 jQuery 的

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

到 z-index 为 1000 但仍高于其他元素的那个元素？

（如果我使用 firebug 将其更改为 -1000 那么它将在其他元素下方）

【问题讨论】：

你想达到什么效果？为 z-index 设置动画效果不会很好。即使 z-index 逐渐降低，您也只会在高/低值切换的点注意到（非动画）变化，并且它变得小于其他元素。
@munch：我可以看到这是如何工作的。考虑一摞纸牌，以及一张在纸牌堆中荡漾的纸牌。请注意，只有在元素开始到 -1000 之间的范围内有一堆带有 z-index 的卡片时，它才会起作用......
是否有任何文档说 animate() 不适用于 z-index？
malsup 在此声明 jquery.malsup.com/cycle/adv.html 不要尝试在 ie 中设置 z-index 动画
@munch 我也需要这个，因为我正在制作另一个动画，它使用 z-index 作为计算页面位置的基础； IE。更高的 z-index == 更接近 == 更大。如果你只是跳 z-index，那么这个计算也会跳，看起来很糟糕。

标签： jquery z-index jquery-animate

【解决方案1】：

jQuery 尝试在动画的每个步骤中为值添加一个单位。所以，不是99，而是99px，当然，这不是一个有效的zIndex值。

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

幸运的是，您可以破解 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
});

有关~~ 的更多信息，请参阅this。

【讨论】：

这个有最低 jQuery 版本吗？我只是试图用 jQuery 1.2.6 做到这一点，不幸的是它根本没有做任何事情。我尝试添加一个完整的函数，甚至动画也没有调用它。
我和马修有同样的问题。我正在使用 jquery 1.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);

【解决方案2】：

~~您不能为 zindex 设置动画。~~您可以使用 .css 设置它。

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

【讨论】：

我认为 animate() 应该能够在 CSS 中为任何东西（合理）设置动画？（具有标量值的东西）
嗯，我还没有看到 3d 浏览器！
动画 z 索引对于这样的事情非常有用：jsfiddle.net/ejvsY/122
@Bob Kruithof 那个 js 甚至没有提到 z-index！
没有这么说，只是说它对这样的事情非常有用；）