负载部分jQuery的旋钮动画 [英] jquery knob animate on load section

问题描述

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

I'm using jquery.knob plugin in a website is very easy to implement. I animate it and everything is ok, but i would like animate effect start when I scroll to specific section of the web: for example when I scroll to #about section.

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

Anybody Knows if is that posible?

在此先感谢

推荐答案

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

There are several jQuery-Plugins to check if an element is scrolled into view, e.g. 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 来这出视口，并应尽快，因为它是针对启动动画。元素

Initialize the knob and write a function for the animation. Just bind inview to the element that's out of the viewport and should start the animation as soon as it's in view.

$(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的旋钮动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！