Question

我有这个动画甜甜圈改变了li悬停的价值。但是，当前它重置为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的{{1}}功能将其添加回here，但我无法在您的jsFiddle中使用它。

JS图表旋钮：从值到值的动画而不是0

1 个答案: