上负载部的jquery旋钮有生(jquery knob animate on load sectio

我使用jquery.knob在一个网站的插件是非常容易实现的。 我制作动画和一切都很好，但我想动画效果开始的时候我滚动到网页的特定部分：例如当我滚动到#about部分。

任何人都知道，如果是更多钞票？

提前致谢

Answer 1:

有几种jQuery的插件，以检查是否一个元件被滚动到视图，例如jquery.inview 。

例如设置：

<input type='text' class='dial' value='0' data-number='100' />
<div style="height: 300px">scroll down</div>
<div class="startKnob">start</div>

初始化旋钮和写的动画功能。 只要绑定inview到这出视，并应尽快，因为它是针对启动动画的元素。

$(function () {
  $('.dial').knob({
     min: '0',
     max: '100',
     readOnly: true
  });
});

startKnob =  function() {
  $('.dial').animate({
      value: $('.dial').data('number')
  },{
      duration: 950,
      easing: 'swing',
      progress: function () {
                 $('.dial').val(Math.round(this.value)).trigger('change');
     }
 });
}

$('.startKnob').bind('inview', startKnob);

工作示例这里： 启动旋钮动画时，特定元素在视图

文章来源: jquery knob animate on load section