Question

我正在尝试修改jQuery旋钮插件以用作动画图表。

这是我到目前为止所做的：

HTML：

<ul id="chart">
<li rel="100">Cats</li>

<input class="knob animated donut" value="0" rel="70" />

使用Javascript：

$('.knob').each(function () {
var $this = $(this);
var myVal = $this.attr("rel");
$(this).knob({
    readOnly: true,
    displayInput: false,
    bgColor: "cccccc",
    fgColor: "e60022"
});
       $({
           value: 0
       }).animate({

           value: myVal
       }, {
           duration: 1000,
           easing: 'swing',
           step: function () {
               $this.val(Math.ceil(this.value)).trigger('change');

           }
       })
   });

$('#chart > li').mouseover(function(){    
    $('#donut').text($(this).attr('rel'));
});

我希望能够将鼠标悬停在<li>元素上并使用rel值将其应用于图表。我想我可能需要在悬停时包含一些JS重绘图表，但不知道怎么做（我没有太多的JS知识）。

感谢任何帮助。

Answer 1

DEMO

您需要在事件处理程序中设置animate属性。所以，初始化你的＆＃34;旋钮＆＃34;就像你做的那样，然后在事件处理程序中检索值并运行动画。

在演示中，我使用了数据属性（这对我来说更有意义），而不是rel属性，但以下内容应该与您的标记一起使用：

var donut = $('.knob');    
donut.knob({readOnly: true,
    displayInput: false,
});
$('#chart > li').on('mouseenter', function(){    
    var myVal = $(this).attr('rel'); 
    donut.stop().animate({value: myVal}, {
           duration: 200,
           easing: 'swing',
           step: function () {
               donut.val(Math.ceil(this.value)).trigger('change');
           }
    });
});

HTML：更改输入以使用颜色的数据属性，因为FF中存在错误

<input class="knob" data-fgColor="#e60022" data-bgColor="#ccc" value="" />

通过更改依赖悬停来重新设置jQuery图表

1 个答案:

DEMO