jquery 旋钮在加载部分动画答案

【问题标题】：jquery knob animate on load sectionjquery 旋钮在加载部分动画
【发布时间】：2013-10-26 09:15:26
【问题描述】：

我在一个网站中使用 jquery.knob 插件非常容易实现。我对其进行了动画处理，一切正常，但我希望在滚动到网络的特定部分时开始动画效果：例如，当我滚动到#about 部分时。

有人知道这是否可行吗？

提前致谢

【问题讨论】：

标签： jquery animated jquery-knob

【解决方案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);

这里的工作示例：Start knob animation when specific element is in view

【讨论】：