0

我想为悬停时填充的旋钮圈设置动画。我是 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

4

1 回答 1

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

你需要在小提琴中包含knob.js，否则你会得到一个'404 Not Found'错误并包含jquery，否则你会得到这个错误'Uncaught ReferenceError：$ is not defined'
http://jsfiddle.net/dWsuP/ 1/

于 2013-10-23T17:01:08.393 回答