アニメーションの残り時間を得る方法はありますか？

Question

divをいくつか持っていて、その子に.animate({opacity:0},400, function(){});を使用しているとします。 アニメーションが完了するまでの残り時間を取得することは可能ですか？残りの200ミリ秒など、アニメーションがない場合は0ですか？おかげさまで

Answer 1

私は、残り時間を取得するためにステップ機能を使用する例を作成しました：

を

（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>'); 
}); 

• あなたは、私が現在アニメーション化され（left）プロパティを取得するためにanimation step内fx.propを使用する方法を見ることができます。
  
• あなたはどのように見ることができます：私たちは簡単にいくつかの簡単な数学（(now*time)/distance）によって「停止/一時停止」状態を取得することができ、アニメーションの時間と距離を知ること（不透明度を、何でも...）と返さnow値のおかげで。

Answer 2

私はあなたがそれを必要としない理由はわかりませんが、stepあなたは、この値を抽出することができます：

ステップ関数

.animateの第二のバージョンは（）ステップのオプションを提供 - アニメーションの各ステップで発生するコールバック関数。この関数は、カスタムアニメーションタイプを有効にしたり、アニメーションを変更したりするときに便利です。 2つの引数（nowとfx）を受け取り、これはアニメートされるDOM要素に設定されます。

今：そのようなアニメーション要素のELEMような特性の数を含んjQuery.fxプロトタイプオブジェクトへの参照、開始：各ステップ
FXにアニメーション化されるプロパティの数値それぞれanimatedプロパティの最初と最後の値で終了し、アニメーション化されているプロパティのpropを返します。あなたがより良い[gdoronによって投稿として]あなたはstep機能 を使用することができる方法を理解するのに役立つ

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; 
}