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() { ...

我認為這是一個錯字，因為您的代碼甚至無法解析。 除此之外，我不確定為什么該解決方案對您不起作用。