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

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（在我的例子中是 .thirdDiv）出现在屏幕上时执行代码。我的完整 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;
      }

});

谢谢大家:)

jQuery 屏幕可见时的圆形进度条和百分比文本动画

jQuery circle progress bar and percentage text animation when screen visible

javascript

jquery

jquery-animate

screen

offset