屏幕可见时，jQuery循环进度条和百分比文本动画

Question

我是jQuery的新手，我使用kottenator的jquery-circle-progress插件。我有四个圈子，我希望在屏幕上显示区域时为其栏和百分比文字设置动画。像大多数网站一样起作用。

有人可以帮我解释一下这个效果吗？亲爱的，先谢谢。 My fiddle

HTML：

<section class="firstDiv"></section>
<section class="secondDiv"></section>
<div class="thirdDiv">
  <div id="circle1">
    <span class="rate">85%</span>
  </div>
    <div id="circle2">
    <span class="rate">90%</span>
  </div>
    <div id="circle3">
    <span class="rate">80%</span>
  </div>
    <div id="circle4">
    <span class="rate">70%</span>
  </div>
</div>

CSS：

section{ height: 700px; overflow: hidden;}
.firstDiv{ background: blue;}
.secondDiv{ background: yellow;}
.thirdDiv div{
         float: left;
         width: 25%;
         overflow: hidden;
         margin: 50px 0;
         position: relative;
         }
.rate{
  position: absolute;
  top: 40%;
  left: 25%;
}

JS：

  $('#circle1').circleProgress({
    value: 0.85,
    size: 100,
    fill: {
      gradient: [ "#FD0000" , "#FD7300", "#FDBD00"]
    }
  });


  $('#circle2').circleProgress({
    value: 0.90,
    size: 100,
    fill: {
      gradient: ["#00B050", "#00CA00", "#9EEC00"]
    }
  });


  $('#circle3').circleProgress({
    value: 0.80,
    size: 100,
    fill: {
      gradient: ["#FDFD00", "#FDE700", "#CDF500"]
    }
  });


  $('#circle4').circleProgress({
    value: 0.70,
    size: 100,
    fill: {
      gradient: ["#123FAA", "#3914AE", "#0B63A3"]
    }
  });

My fiddle