5

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

4

3 に答える 3

6

関数の使用方法をよりよく理解できるようにするために[ gdoronstepが投稿したように] step 関数を使用して残り時間を取得する例を作成しました。

(get state!ボタンをクリックすると、アニメーションが停止し、残り時間が表示されます!)

距離のある
デモ 不透明度のあるデモ

距離の例 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
于 2012-05-13T02:06:45.083 に答える
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;
}
于 2012-10-09T06:40:08.773 に答える
3

なぜそれが必要なのかわかりませんが、stepはこの値を抽出するのに役立ちます:

ステップ関数

.animate() の 2 番目のバージョンは、ステップ オプション (アニメーションの各ステップで起動されるコールバック関数) を提供します。この関数は、カスタム アニメーション タイプを有効にしたり、発生中のアニメーションを変更したりするのに役立ちます。これは 2 つの引数 (now と fx) を受け入れ、アニメーション化される DOM 要素に設定されます。

now : 各ステップでアニメーション化されるプロパティの数値
fx : jQuery.fx プロトタイプ オブジェクトへの参照。これには、アニメーション化された要素の elem、最初と最後の値の start と end などの多数のプロパティが含まれます。それぞれアニメーション化されたプロパティ、およびアニメーション化されているプロパティの小道具。

ドキュメント

于 2012-05-13T00:43:32.477 に答える