0

我正在使用 inview.js 和 kubs.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（这个）
动画的 step 函数中的选择器什么都不做。我尝试将其更改为
'.knobchart'
但随后所有的旋钮都被设置为相同的值。

编辑：已解决 @Gaby 的方法效果很好......

4

3 回答 3

1

this当您知道它指向的位置时，您应该存储到一个变量，并使用该变量而不是this..

jQuery('.knobchart').bind('inview', function (event, visible) {
    var self = this; // <-- added this line, and using self from now on in this method
    if (visible == true) {
        jQuery(self).knob();
        jQuery({
            value: 0
        }).animate({
            value: jQuery(self).attr("rel")
        }, {
            duration: 5000,
            easing: 'swing',
            step: function () {
                jQuery(self).val(Math.ceil(this.value)).trigger('change');
            }
        });

    } else {
        $(self).val(0);
    }
});

这是必需的，因为您不是为元素设置动画，而是为对象设置动画。

演示在http://jsfiddle.net/2h8mF/1/

于 2013-06-04T08:43:48.193 回答
0

你为什么不使用$但是jQuery？您可以尝试在每个循环中执行此操作，这可能不太高效：

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


        } else {

            el.val(0);

        }
    });
});

但是有一个问题：线条应该是什么

jQuery({
        value: 0
    }).animate({
        value: jQuery(this).attr("rel")
    }, {
        duration: 5000,
        easing: 'swing',
        step: function () {
            jQuery(this).val(Math.ceil(this.value)).trigger('change');
        }
    })

做？在我看来不对

于 2013-06-04T08:45:54.200 回答
0

我发现了两个问题。

  1. jQuery({value: 0}).animate(...)不是有效的语句，您需要为当前元素设置动画this
  2. this处理程序内部的用法step，您需要使用$.proxy()将自定义上下文传递给回调方法

代码

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 回答