Question

我正在尝试动画我的jquery表盘并加载库，但是当我在构建旋钮对象后尝试为它们设置动画时，没有任何反应。如果我同时在animate和knob构造函数上同时调用$（'＃dial'），它会动画但不会给它增加值或给它一个百分比，直到我完成动画后点击它。

这是我得到的

HTML

  <input type="text" value="0" class="dial"/>

的Javascript

      var dial = $('.dial').knob({
            value: 0,
            width: 120,
            height: 120,
            min: 0,
            max: 100,
            stopper: true,
            readOnly: true,//if true This will Set the Knob readonly cannot click
            draw: function () {
                 $(this.i).val(this.cv + '%'); //Puts a percent after values
            },
           'format': function(v) {return v + '%'},
            thickness: 0.1,
            tickColorizeValues: true,
            skin: 'tron'

        });

        dial.animate({//animate to data targetValue
                value: 89
            }, {
                duration: 5000,
                easing: 'swing',
                step: function () {
                    var percent = Math.ceil(this.value) + '%';
                    $(this).val(Math.ceil(this.value) + '%').trigger('change');
                    //  $(this).val($(this).val() + '%');
                }
            });

Answer 1

这里我的代码可以帮助你（包括动画和风格） http://codepen.io/AdelDima/pen/ueKrI

Answer 2

我使用了GSAP动画库，因为似乎与jquery animate中的step和progress回调有冲突。

Jquery旋钮没有动画与％

2 个答案: