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

【问题标题】：jQuery circle progress bar and percentage text animation when screen visible屏幕可见时的jQuery圆形进度条和百分比文本动画
【发布时间】：2016-11-27 15:01:23
【问题描述】：

我是 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

【问题讨论】：

那些圆圈似乎在那个小提琴中动画。究竟是什么问题？
那些圆圈在 DOM 加载时动画，但我想在用户进入该 DIV 时对其进行动画处理，然后它会进行动画处理。谢谢

标签： javascript jquery jquery-animate screen offset

【解决方案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;
      }

});

谢谢大家:)

【讨论】：