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

フィドルにnob.jsを含める必要があります。そうしないと、「404 Not Found」エラーが発生し、jqueryが含まれます。そうしないと、「Uncaught ReferenceError: $ is not defined」というエラーが発生します
http://jsfiddle.net/dWsuP/ 1/

于 2013-10-23T17:01:08.393 に答える