jQuery旋鈕懸停動畫

Question

我想為懸停時填充的旋鈕圓制作動畫。 我是Knob的新手，所以我不知道我的錯誤在哪里，或者我什至沒有正確的方向。 現在，它甚至沒有顯示一個圓:(

基本上，我只想在圖標周圍畫一個圓圈，以使鼠標懸停。 也許我可以更輕松地實現？

這是解決方案，加上我將在正確的值處開始和停止的一些修復程序，因此您可以中斷動畫而不會破壞它

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更改為true

$(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 ');'    

您需要在小提琴中包含toggle.js，否則會收到“ 404未找到”錯誤並包含jquery，否則會出現此錯誤“未捕獲的ReferenceError：未定義$”
http://jsfiddle.net/dWsuP/1/