CODEWITHSUNDEEP
javascriptjquery
Josh.S
Josh.S

Reputation: 127

Jquery Knob not animating with %

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() + '%');
                }
            });

Upvotes: 0

Views: 251

Answers (2)

Adel
Adel

Reputation: 6288

here my code maybe help you (included animation and style ) http://codepen.io/AdelDima/pen/ueKrI

Upvotes: 1

Josh.S
Josh.S

Reputation: 127

I used GSAP animation library as there seemed to be a conflict with step and progress callbacks from the jquery animate.

Upvotes: 0

Related Questions