0

After lots of search with no luck. I am deciding to post here.

I am using jquery knob to show some charts. And also want to animate the animation is done and working good. But i want to animate on page scroll using jquery smooth scroll plugin. for e.g: when i am click my chart menu item, then page scrolled to the chart section this time i want to animate the knob.

Also if any alternative you have then please suggest me.

thanks in advance

HTML Code

<input type="text" class="dial" value="90" >

Jquery Code

$('.dial').each(function () { 
    var elm   = $(this);
    var color = elm.attr("data-fgColor");
    var perc  = elm.attr("value");

    elm.knob({ 
      "value"        : 0,
      "min"          : 0,
      "max"          : 100,
      "width"        : 200,
      "height"       : 200,
      "bgColor"      : "#edf1ea",
      "fgColor"      : "#82b854",
      "skin"         : "tron",
      "readOnly"     : true,
      "thickness"    : .2,
      "linecap"      : "round",
      "dynamicDraw"  : true,
      "displayInput" : false
    });

    $({value: 0}).animate({ value: perc }, {
      duration : 1000,
      easing   : 'swing',
      progress : function () {
        elm.val(Math.ceil(this.value)).trigger('change')
      }
    });
});
CodeBriefly
  • 1,000
  • 4
  • 16
  • 29
  • Are you using knob like a progress bar ? I understood, In the page you have the knob in the middle, so when you scroll to that place you need to animate the knob (that's fine).. But here what do you mean the knob animation ? Can you update some details that how you need to animate.. – Soundar Jul 24 '15 at 18:46
  • @SoundarR, Knob animation when my page scrolled and gone to the div contains knobs. Then all the knob animatedly shown. hope this one clears you. – CodeBriefly Jul 26 '15 at 15:53

0 Answers0