0

私は、inview.js プラグインとnobs.js プラグインを使用して、アニメーション化されたノブ チャートを作成しています。次のコードを使用してノブをアニメーション化しています。

jQuery('.knobchart').bind('inview', function (event, visible) {
if (visible == true) {
    jQuery(this).knob();
    jQuery({
        value: 0
    }).animate({
        value: jQuery(this).attr("rel")
    }, {
        duration: 5000,
        easing: 'swing',
        step: function () {
            jQuery(this).val(Math.ceil(this.value)).trigger('change');
        }
    })


} else {

$(this).val(0);

}
});

ノブのマークアップは次のようになります。

<input data-readonly="true" class="knobchart" rel="999" value="0">

問題は、指定することです

jQuery(これ)
アニメーションのステップ関数のセレクターは何もしません。に変えてみました
「.ノブチャート」
しかし、すべてのノブが同じ値にアニメーション化されます。

編集: 解決済み@Gaby のメソッドは見事に機能します...

4

3 に答える 3

0

私が見つけた2つの問題がありました。

  1. jQuery({value: 0}).animate(...)は有効なステートメントではありません。現在の要素をアニメーション化する必要がありますthis
  2. ハンドラーthis内での使用。 $.proxy()を使用して、カスタム コンテキストをコールバック メソッドに渡す必要があります。step

コード

jQuery('.knobchart').bind('inview', function (event, visible) {
    if (visible == true) {
        jQuery(this).knob();
        jQuery(this).animate({
            value: jQuery(this).attr("rel")
        }, {
            duration: 5000,
            easing: 'swing',
            step: $.proxy(function () {
                jQuery(this).val(Math.ceil(this.value)).trigger('change');
            },this)
        })
    } else {
        $(this).val(0);
    }
});
于 2013-06-04T08:49:03.540 に答える