javascript - Jquery 或 Javascript 动画 Z-索引

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 毫秒(足以满足我的需要的速度)上使用 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 .

---

编辑 对于它的值(value)，here是使用动画间隔的同一个演示。我在你的第二个片段中看到一个语法错误:函数声明应该是

function move() { ...

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