1

jQuery が .animate を実行中に対話することは可能ですか? 画像を下から上に移動する小さなアニメーションがあります。私のアニメーションは、アニメーションがいつ終了するか、またはどの位置で停止する必要があるかを知るために、外部から入力を取得します。

ここで、やるべきことが 1 つありました。それは、たとえばアニメーションが 70% 以上に達した場合、画像を縮小する必要があるかどうかを確認することです。ただし、これは距離が 70% を超えた場合にのみ発生します。それをボトルネックと比較すると、上部が薄くなるので、画像を縮小しようとします。しかし、これを行う方法の手がかりが見つかりません。

例として：

アクション 1: 50% 移動 -- OK

アクション 2: 90% 移動 -- 進行中 -- ただし 70% で画像を 50% に縮小

編集

助けてくれてありがとう、でも... 申し訳ありません... よくわかりません。私はあなたの解決策を試しましたが、私は常に上の円と水の間にオフセットがあります:

こちらの CodePen.io をご覧ください

4

1 に答える 1

1

他に誰も答えていないようなので、少なくとも試してみますか？

step メソッドまたは $.Animation のいずれかを使用できます。どちらの操作もほとんど同じです。後者の例を次に示します。step メソッドの使用方法の例は、ここ SO で簡単に見つけることができます。

var elem  = $('#some_element'),
    width = elem.width();

$.Animation( {left: elem.position().left}, 
    {
        left: 500
    }, {
        duration: 2000
    }
).progress(function (e) {
    var start  = e.tweens[0].start, // start position
        end    = e.tweens[0].end,   // end position
        now    = e.tweens[0].now,   // where we are now
        lapsed = Math.ceil(now / end * 100); // calculate percentage

    elem.css('left', now);

    if (lapsed > 70) { // 70% reached
        elem.width(width + ((lapsed-70)*2));  // lets animate width as well
    }
});

フィドル

于 2013-11-06T16:44:53.507 に答える