jQuery或Javascript对Z-Index进行动画处理

Question

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

首先是通过采用可接受的答案在此处概述的步骤功能来适应JQuery animate命令：

jQuery的$（'＃divOne'）。animate（{zIndex：-1000}，2000）不起作用吗？

这种方法对我来说的问题是$（'＃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();

看到这个演示 。

---

编辑值得一试的是， 这里是使用动画间隔的相同演示。 我在第二个片段中看到语法错误：函数声明应为

function move() { ...

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