当页面滚动到Bootstrap中的旋钮部分时,Jquery旋钮动画

时间:2015-03-23 07:47:01

标签: jquery twitter-bootstrap-3 jquery-knob

经过大量搜索后没有运气。我决定在这里发帖。

我正在使用jquery旋钮来显示一些图表。并且还希望动画制作完成并且工作正常。但我想使用jquery smooth scroll插件在页面滚动上制作动画。例如:当我点击我的图表菜单项时,页面滚动到图表部分,这次我想为旋钮设置动画。

如果您有任何替代方案,请建议我。

提前致谢

HTML代码

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

Jquery代码

$('.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')
      }
    });
});

0 个答案:

没有答案