Jquery Knob not animating with %

Question

I'm trying to animate my jquery dial and have the libraries loaded and all yet when I try to animate them after building the knob object, nothing happens. If I call both $('#dial') on both the animate and knob constructor it animates but doesn't ceil the value or give it a percent until I click it after its finished animating.

Here is what I have got

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动画的步骤和进度回调有冲突。