当屏幕可见时，jQuery Circle Progress Bar和百分比文本动画

Question

我是jQuery的新手，我正在使用kottenator的jquery-circle-progress插件。我有四个圆圈，我想在屏幕上可见的区域可见时将其栏和百分比文本动画。像大多数网站一样产生效果。

任何人都可以通过一些解释来帮助我做出效果吗？预先感谢，亲爱的。我的小提琴

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"]
    }
  });

我的小提琴

Answer 1

好吧，这是一个很好的体验。我已经通过使用JQuery.Appear插件解决了问题。我将完整的代码插入了这一部分：

    var el = $('.circle'),
        inited = false;
    el.appear({ force_process: true });
    el.on('appear', function() {
      if (!inited) {
        el.circleProgress({ value: 0.7 });
        inited = true;
      }
    });

这是一个不错的插件，它在屏幕上的DIV（在我的情况下）执行代码。我的完整JS代码如下：

    var el = $('.thirdDiv'),
        inited = false;
    el.appear({ force_process: true });
    el.on('appear', function() {
      if (!inited) {
        $("#circle1").circleProgress({
        value: 0.7,
        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"]
        }
      }); 
        inited = true;
      }
});

谢谢大家：）