jQuery旋鈕懸停動畫

Question

我想爲在懸停時填滿的旋鈕圈設置動畫。我是Knob的新手，所以我不知道我的錯誤在哪裏，或者我是否有正確的方向。現在，它甚至不顯示一個圓圈:(

基本上我只是想有圍繞上徘徊填補了圖標的圓。也許我能做到這一點更容易？

這是它的sollution再加上一點點修正，我將啓動，並在正確的價值觀停止，這樣你就可以interupt動畫而不被破壞。

的HTML：

<input type="text" value="0" id="circle" /> 

JavaScript的：

$(function() { 
$('.circle').knob({ 
    min: '0', 
    max: '100', 
    readOnly: true, 
    displayInput: false 
}); 

$('.circle').parent().hover(function() {console.log("hover"); 
       $({ value: $('.circle').val() }).animate(
        { value: 100 }, 
        { duration: 300, 
         easing: 'swing', 
         progress: function() { 
          $('.circle').val(Math.round(this.value)).trigger('change'); 
         } 
        }); 
      }, function() { 
       $({ value: $('.circle').val() }).animate(
        { value: 0 }, 
        { 
         duration: 300, 
         easing: 'swing', 
         progress: function() { 
          $('.circle').val(Math.round(this.value)).trigger('change'); 
         } 
        }); 
       }); 
}); 

這裏是JSFiddle

Answer 1

需要懸停處理程序更改爲#circle的父母或更改displayInput真

$(function() { 
$('#circle').knob({ 
    min: '0', 
    max: '100', 
    readOnly: true, 
    displayInput: false 
}); 
//$('#circle').parent() is the new div that contains the input and the canvas 
$('#circle').parent().hover(function() { 
       $({ value: 0 }).animate(
        { value: 100 }, 
        { duration: 1000, 
         easing: 'swing', 
         progress: function() { 
          $('#circle').val(Math.round(this.value)).trigger('change'); 
         } 
        }); 
      }, function() { 
       $({ value: 100 }).animate(
        { value: 0 }, 
        { 
         duration: 1000, 
         easing: 'swing', 
         progress: function() { 
          $('#circle').val(Math.round(this.value)).trigger('change'); 
         } 
        }); 
       }); 
});//you need to close with ');'  

你需要包括在該knob.js小提琴否則你會得到一個「404 Not Found」錯誤，包括jQuery的，否則你得到這個錯誤「未捕獲的ReferenceError：$沒有定義」
http://jsfiddle.net/dWsuP/1/