3

要素のテキストを 2 つの数値の間でアニメーション化する jQuery プラグインに取り組んできました。jQuery の animate 関数では、アニメーション化する属性を指定する必要があります。私の場合、基本的に各アニメーション ステップで text() を呼び出す必要があるため、それを機能させるためにいくつかの仕上げを行う必要がありました。

通常の方法で animate() を使用していないため、jQuery が処理しないため、競合するアニメーションにさらされました。たとえば、要素のテキストを 5 秒間で「500」にアニメーション化し始め、すぐに同じ要素のテキストを 1 秒間で「500000」にアニメーション化し始めると、互いに競合しているため、奇妙な結果が得られます。

百聞は一見に如かずので、ここに jsFiddle があります: http://jsfiddle.net/XjrNC/

私の主な質問は、次のとおりです。新しいアニメーションを開始するときに、以前のアニメーションが停止することを保証する最も適切な方法は何ですか。

2 番目の質問は、これまでの私のコードに対するフィードバックはありますか? 別のアプローチを取りますか？

ありがとう。

4

1 に答える 1

1

クラスごとに呼び出す代わりにIDを割り当てるだけです...これはあなたのコードを使用することになります。私のバージョンではかなりの数の編集を行ったので、実際にはこれを行うことさえしません。

$(function() {
    $('#oneThousand').tweenText(500, 5000);
    $('#fiveThousand').tweenText(500000, 1000);
})

あなたのコードでは、 tweenText 内の $.eachはあまり役に立たないと感じました。IMO はメソッドの外にある必要があります。メソッド内で追加の選択を行うのではなく、指定されたセレクターに対してこれを行うという概念です。

また、事前に定義されたセットを渡すのではなく、引数のオブジェクトを使用することを強くお勧めします。不要なものは null として渡すか、単に除外することができます。

さらに、現在の tweenText が完了したときに実行されるものをセットアップできるように、コールバック関数を追加しました。

ここに私の変更があります。

http://jsfiddle.net/pmZHp/3/

于 2012-09-24T22:38:55.210 に答える