Question

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

第一种方法是使用接受的答案调整JQuery animate命令和此处概述的步骤功能：

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

这个方法给我的问题是$（＆＃39;＃obj＆＃39;）。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调整为动画＆＃34;的那一点。这种情况很有效，但有些东西导致它突然停止工作。代码仍然通过$（＆＃39;＃obj＆＃39;）。css（＆＃39; z-index＆＃39;，val）; line和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是使用动画间隔的相同演示。我在你的第二个片段中看到语法错误：函数声明应该是

function move() { ...

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

Jquery或Javascript动画Z-Index

1 个答案: