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