Jquery旋钮未使用%设置动画

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的步骤和进度回调似乎存在冲突。