Jquery 或 Javascript 动画 Z-Index

Question

我需要为特定 HTML 对象的 z-index 属性设置动画的功能。我已经能够以两种方式实现这个动画，它们都有各自的困难/缺点。为我成功回答此问题将解决以下两个问题之一：

第一个是通过接受的答案将 JQuery animate 命令与此处概述的步骤功能相适应：

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

这种方法对我来说的问题是 $('#obj').stop();以这种方式完成时，命令不能过早结束动画。除非我销毁正在使用的对象并创建一个新对象（这显然会导致闪烁），否则它总是会结束。如果有人知道正确停止这样的步进动画的方法，或者解决此问题的方法，我很乐意看到它。

var div = $('#obj');

$({z: ~~div.css('zIndex')}).animate({z: [-2000, 'linear']}, {
    step: function() {
        div.css('zIndex', ~~this.z);
    },
    duration: 10000
});

第二个是在 20 MS 上使用 setInterval 循环（这个速度足以满足我的需要）来简单地将 z-index 调整到“动画”的那个点应该是什么。这在一段时间内效果很好，然后某些原因导致它突然停止工作。代码仍然贯穿 $('#obj').css('z-index', val);行，并且 val 正在更改，但它不再更新 DOM 中的对象。我在较慢的计时器设置上也尝试过，结果相同。有谁知道为什么 JQuery 可能突然不能再设置 Z-Index 了吗？

function () move {
    if (!(MoveX == 0 && MoveY == 0))
    {
        $('#obj').css('z-index', val);
    } 
}

Answer 1

$('#obj').stop() 不适合您，因为动画没有在 $('#obj') 上执行。

它正在对象$({z: ...}) 上执行（使用自定义步进函数）。这意味着你应该做类似的事情

var anim = $({z: ~~div.css('zIndex')}).animate({z: [-2000, 'linear']}, {
  step: function() {
    div.css('zIndex', ~~this.z);
  },
  duration: 10000
});

// sometime later
anim.stop();

看到这个demo。

---

编辑 值得一提的是，here 是使用动画间隔的相同演示。我在你的第二个 sn-p 中看到一个语法错误：函数声明应该是

function move() { ...

我认为这是一个错字，因为您的代码甚至无法解析。除此之外，我不确定为什么该解决方案不适合您。