3

ページが読み込まれたときに数字がロールインするように数字をアニメーション化しようとしています。別のライブラリを使用してダイヤルを表示しています ( http://anthonyterrien.com/knob/ )。私が抱えている問題は、実行するたびに数値が異なるように見えることです。19420 で終わる一貫した数値である必要があります。ただし、低い場合もあり、特定のパターンはないようです。

私のJSコードは次のようになります：

$(function() {
    $('#dial').knob({
        min: '0',
        max: '25000',
        readOnly: true
    });

    $({
        value: 0
    }).animate({
        value: 19420 
    }, {
        duration: 950,
        easing: 'swing',
        step: function() {
            $('#dial').val(Math.round(this.value)).trigger('change');
        }
    });
});

フィドルはここにあります: http://jsfiddle.net/ND5Sf/

私は何を間違えましたか、それとも見逃したものはありますか? そうでない場合、これら 2 つのライブラリは互換性がありませんか?

4

1 に答える 1

4

問題は、stepの代わりに関数を使用しているためですprogress。

ステップ：

アニメーション化された各要素のアニメーション化されたプロパティごとに呼び出される関数。この関数は、Tween オブジェクトを変更して、プロパティの値を設定する前に変更する機会を提供します。

進捗：

アニメーションの各ステップの後に、アニメーション化されたプロパティの数に関係なく、アニメーション化された要素ごとに 1 回だけ呼び出される関数。(バージョン追加:1.8)

コード：

$(function () {
    $('#dial').knob({
        min: '0',
        max: '25000',
        readOnly: true
    });

    $({
        value: 0
    }).animate({
        value: 19420
    }, {
        duration: 950,
        easing: 'swing',
        progress: function () {
            $('#dial').val(Math.round(this.value)).trigger('change');
        }
    });
});

ドキュメント: http://api.jquery.com/animate/

デモ: http://jsfiddle.net/IrvinDominin/JW2gP/

于 2013-08-16T11:40:55.640 に答える