jQuery旋钮悬停动画 [英] jQuery Knob hover animation

问题描述

我想为悬停时填充的旋钮圆制作动画.我是Knob的新手，所以我不知道我的错误在哪里，或者我什至没有正确的方向.现在，它甚至没有显示出一个圆圈:(

I want to animate the Knob circle that it fills up on hovering. I'm new to Knob so i have no idea where my error is or if i even have the right direction. Right now it does not even show a circle :(

基本上，我只想在图标周围画一个圆圈，以使鼠标悬停时会变满.也许我可以更轻松地做到这一点?

Basically i just want to have a circle around an icon that fills up on hovering. Maybe i can achieve that easier?

这是解决方案，加上我将在正确的值处开始和停止的一些修复程序，因此您可以在不破坏动画的情况下进行动画插入

HTML:

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

JavaScript:

the 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

推荐答案

您需要将悬停处理程序更改为#circle的父级，或将displayInput更改为true

you need to change the hover handler to the parent of #circle or change displayInput to 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 Not Found"错误，并包含jquery，否则会出现此错误"Uncaught ReferenceError:未定义$".
http://jsfiddle.net/dWsuP/1/

you need to include the knob.js in the fiddle or else you get a '404 Not Found' error and include jquery or else you get this error 'Uncaught ReferenceError: $ is not defined'
http://jsfiddle.net/dWsuP/1/

这篇关于jQuery旋钮悬停动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！