jquery旋钮动画加载部分

Question

我在网站中使用jquery.knob插件很容易实现。我为它设置了动画并且一切正常，但是当我滚动到网页的特定部分时，我想要启动动画效果：例如，当我滚动到#about部分时。

任何人知道，如果这是posible？

由于事先

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); 

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