Jquery Knob не анимируется с%

Я пытаюсь оживить мой циферблат jquery и загружать библиотеки, но все же, когда я пытаюсь оживить их после создания объекта ручки, ничего не происходит. Если я назову оба $ ('# 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() + '%');
                }
            });