1

<div>「グラデーション」CSS スタイルを一連の要素に自動的に適用したいと考えています。つまりopaque、透明から完全に不透明までの一連の要素にルールを設定します。

jQuery.animate()私が必要とするようにCSSスタイルを補間するのに素晴らしい仕事をしているようです. しかし、明らかに、animate()時間の経過とともに遷移しますが、個々の「フレーム」の数を計算したいだけです。

jQuery コードのどこかに、アニメーション機能のこれらの個々のステップを計算するコードを隠す必要があります。私は何かに遭遇することを期待していましinterpolate(objectWithOldCss, objectWithNewCss, step)たが、そのようなものを見つけることができないようです.

CSSルールを補間して直接使用するjQueryのコードにアクセスする方法はありますか?

編集:ジェームズ・モンターニュの答えのおかげで、私は次のjQuery.interpolate()方法になりました:

$.fn.interpolate = function(name, value, blend, easing) {
    var elem = this[0];
    if (jQuery.isArray(name)) {
        $.Tween(elem, {duration: 1}, name, value, easing || "linear").run(blend);
    } else {    
        easing = blend;
        blend = value;        
        $.each(name, function(n, v) {
            $.Tween(elem, {duration: 1}, n, v, easing || "linear").run(blend);
        });
    }
}

ここで実証されています：http://jsfiddle.net/mwvdlee/yfcg5/

4

1 に答える 1

2

jQuery を使用Tween( elem, options, prop, end, easing )して値を計算しtweenます。各ステップがいつ実行されるかを正確に知る方法がないため、事前にすべてを計算することはできません。このため、経過した期間の % に基づいて、ステップが実行される時点で次の値を取得します。

注: デュレーション (任意のデュレーション) を含める必要があります。そうしないと、イージングが無視されます。

あなたのopacity例では、次のようなことができます：

var $divs = $("#holder div");
var steps = $divs.length;
var tween = new $.Tween( $divs[0], {duration: 1}, "opacity", 0, "swing");

for(var i = 0; i < steps; i++){
    var val = tween.run(1/(steps-1)*i).now;
    $divs.eq(i).css("opacity",val);
}

http://jsfiddle.net/878QQ/3/

これは、最初に一致した div の不透明度を開始点として使用し、0 を終了点として使用します。

于 2013-06-03T21:20:12.943 に答える