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"> 

link

Answer 1

當地$this對象沒有得到設定旋鈕的每一個新實例，而不是同this對象每次都被引用。

所以你需要做的是爲每個旋鈕實例創建一個新的本地參考this對象。

var $this = $(this);

Live Demo @ 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'); 
      } 
     }); 
    });