7

次のようにして、jquery アニメーションのコーディングに慣れてきました。

  1. css または javascript を使用して、要素の初期状態 (幅、高さ、上、左、不透明度など) を設定します。この初期状態がアニメーション終了時の状態です。

  2. 要素がアニメーションの先頭にある状態に要素を移動するには、期間が 0 の .animate を使用します。

  3. 適切な期間を持つ通常の .animate を使用して、最後に要素がステップ 1 の状態に戻るアニメーションを実行します。

ここに例があります。

/* css file */
.animatedObject
{
    width:60%;
}

// javascript file
$('.animatedObject')
    .animate({width: '-=20%'}, 0)
    .animate({width: '+=20%'}, 1000);

少なくとも私にとっては、このコードを使用する利点がいくつかあります。まず、アニメーション化しようとしているものが明確に見えます。第二に、javascript が無効になっている場合、オブジェクトはアニメーションの最終状態になります。第 3 に、css を使用して調整するためにオブジェクトの位置をわずかに変更できますが、アニメーションはほとんど同じように見えます。

私が .css を使用していない理由は、.css メソッドで 0 デュレーションのアニメーションを置き換えようとすると、アニメーションの開始点が異なるためです。+= または -= をサポートしているとは思わないか、サポートしている場合は動作が異なります。

それで、これはこれを行う良い方法ですか？業界標準の方法は何ですか？

4

1 に答える 1

4

まあ、あなたはまだ使うことができます.css()：

var anObj = $('.animatedObject');
anObj.css("width", anObj.css("width") - (20 / anObj.css("width"))).animate({
    width: '+=20%'
}, 1000);

私はこれがより速く働くと信じています。

編集：

jsperf.comを使用して、ちょっとしたベンチマークを行いました。これが私の結果です（を使用Google Chrome）：

.animate({}, 0)

コード：

$('.animatedObject')
    .animate({width: '-=20%'}, 0)
    .animate({width: '+=20%'}, 1000);

最終結果:

10,013 operations per second
±7.48%
fastest

.css();

コード：

var anObj = $('.animatedObject');
anObj.css("width", anObj.css("width") - (20 / anObj.css("width"))).animate({
    width: '+=20%'
}, 1000);

最終結果:

2,477 operations per second
±6.39%
75% slower

結論

アニメーション機能はそのまま。を使用する.css()と、実際には遅くなることがわかりました。2つの追加機能があるという事実だと思います。それはそれだけの価値はありません。.css()私はそれよりも速く機能すると思っていたので、これは実際には驚きでした. ブラウザでこれを自分でテストしてください！

于 2013-07-16T22:25:22.453 に答える