jquery-knob - Jquery 旋钮动画

Question

我在动画 jquery 旋钮时遇到问题。正如您在我的示例中看到的，只有最后一个动画。

<input class="knob nummer1 animated" value="0" rel="64">
       <input class="knob nummer2 animated" value="0" rel="77">
       <input class="knob nummer3 animated" value="0" rel="99">

关联

Answer 1

没有为每个新的旋钮实例设置本地$this对象，而是this每次都引用相同的对象。

所以你需要做的是this为每个旋钮实例创建一个新的对象本地引用。

var $this = $(this);

现场演示@JSFiddle

JS代码：

     $('.knob').each(function() {
       var $this = $(this);
       var myVal = $this.attr("rel");
       $this.knob({
       });
       $({
          value: 0
       }).animate({
          value: myVal
       }, {
          duration: 2000,
          easing: 'swing',
          step: function() {
             $this.val(Math.ceil(this.value)).trigger('change');
          }
       });
   });