有什麼方法可以獲得動畫的剩餘時間嗎？

Question

假設我有一些div，並且我爲其子女使用.animate({opacity:0},400, function(){});。 是否有可能獲得完成動畫的剩餘時間？例如，剩餘200毫秒，或者如果沒有動畫，則爲0？ 謝謝。

Answer 1

爲了幫助您更好地瞭解如何使用step功能 [張貼由gdoron]
我使用一步函數來獲取剩餘的時間創建了一個例子：

（點擊get state!按鈕停止動畫並檢索剩餘時間！）

demo with distance
demo with opacity

距離例如jQuery的：

var time = 4000; 
var distance = 300; 
var currentTime = 0; 

$('#ball').animate({ 
    left: distance 
}, { 
    duration: time, 
    step: function (now, fx) { 

     currentTime = Math.round((now * time)/distance); 
     var data = fx.prop + ' ' + Math.round(now) + '; <b>' + currentTime + 'ms</b> '; 

     $('body').append('<p>' + data + '</p>'); 
    }, 
    easing: 'linear' 
}); 

$('#getTime').click(function() { 
    $('#ball').stop(); 
    $('body').prepend('<p>currentTime is:' + currentTime + ' ms; REMAINING: ' + (time - currentTime) + 'ms</p>'); 
}); 

• 你可以看到我是如何使用的fx.prop的animation step內獲得當前動畫的（left）屬性。我們可以通過一些簡單的數學運算（(now*time)/distance）和返回的now值，輕鬆地檢索動畫時間和距離（不透明度，無論...）的「停止/暫停」狀態。

Answer 2

我不知道你爲什麼需要它，但step可以幫你提取此值：

步驟功能

第二個版本.animate的（）提供了一個循序漸進的選項 - 在動畫的每個步驟中觸發的回調函數。此功能對於啓用自定義動畫類型或在動畫發生時更改動畫非常有用。它接受兩個參數（now和fx），並將其設置爲正在動畫的DOM元素。

現在：屬性的數值在每一步進行動畫
FX：一個參考jQuery.fx原型對象，其中包含許多性質比如ELEM爲動畫元素，開始並分別結束動畫屬性的第一個和最後一個值，併爲屬性設置動畫。

docs

Answer 3

聽着，沒關係大家都在談論的step函數。我曾經需要你做的並且寫下我自己的那個，簡單地說它是通過查看整個動畫時間（應該已經知道你已經知道了，因爲你曾經給這個數字給jQuery）和的商目前和目標的不透明度。然後，將該商與總動畫時間相乘，從總時間中減去總和。就那麼簡單。

僞代碼：

func calculate-time-left-in-a-running-fade-in-animation: 
{ 
    var current_opacity = $elem.css('opacity'); 
    var target_opacity = this.getTargetOpacity(); 

    var total = this.getTotalAnimationTime(); 

    var quotient = current_opacity/target_opacity; 
    return total - quotient * total; 
}