jQuery Knob анимация при наведении

Question

jQuery Knob анимация при наведении

0

Я хочу анимировать круг Knob, который он заполняет при наведении. Я новичок в 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

Chris 23 окт. 2013, в 18:35

Источник

Теги:

javascript

jquery

jquery-knob

1 ответ

Ещё вопросы

Abraham Uribe · Accepted Answer · 2013-10-23T14-07-00.000Z

вам нужно изменить обработчик hover на родительский элемент #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: $ не определен"
http://jsfiddle.net/dWsuP/1/

Ну, это работает, как я хочу, с небольшим исключением: когда круг не заполнен, когда вы вынимаете из него нашу мышь (когда вы не ждете окончания анимации), тогда он начнет сбегать со 100, но я думаю, что есть идея, как я могу это исправить.