javascript - JS图表旋钮: animate from value to value rather than 0

Question

我有一个在 li 悬停时改变值的动画 donut 。但是，目前它重置为 0，然后动画为新值。理想情况下，它应该从一个值到另一个值动画。

这是一个 JSFiddle:http://jsfiddle.net/jme11/xx2Ky/

我的JS:

var dial = $('.dial');
dial.knob({
    readOnly: true
});
$('.pets > li').on('mouseenter', function () {
    var button = $(this);
    var myVal = button.data('value');
    button.css('backgroundColor', 'yellowgreen').siblings().css('backgroundColor', '#ccc');
    dial.stop().animate({
        value: myVal
    }, {
        duration: 200,
        easing: 'swing',
        step: function () {
            dial.val(Math.ceil(this.value)).trigger('change');
        },
        complete: function () {
            dial.val(myVal + '%');
        }
    });
});

Answer 1

我已经找到问题所在；是这样的:

dial.val(myVal + '%');

当您使用 val 属性设置动画时，它会自动使用该 val 值作为起点。但是，您的代码将 val 设置为字符串。 jQuery 然后会感到困惑，并在下次您想要设置动画时默认为 0。如果您将行更改为

dial.val(myVal);

您会看到它按预期工作 — 明显的缺点是您丢失了百分号。您可以使用 knob 的 format 功能将其添加回来，参见 here ，但我无法让它在你的 jsFiddle 中工作。