jquery - 滚动后如何显示饼图动画

Question

我使用 Easy pie chart 制作饼图。为了在滚动时显示，我使用 Wow.js 。但是我想显示饼图在滚动时增加到它定义的百分比。它告诉我我是否在那个部分。但是我想在滚动后显示这个动画。我该怎么做。请帮助我。

这是我使用的简易饼图的代码

$('.chart').easyPieChart({
    'barColor':'#AD984E',
    'scaleColor':'#141414',
    'trackColor':'#EEEEEE',
    'size':'200',
    'lineWidth':'5',
    animate: 5000
});

和哇 js

 wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       100,          // default
      mobile:       true,       // default
      live:         true        // default
    }
  )
  wow.init();

这是我工作的链接:http://kapilpaul.uphero.com/autoputzer/

TIA

Answer 1

你可以试试这个代码:

    $(window).scroll( function(){

    /* Check the location of each desired element */
    $('.chart').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

        $('.chart').easyPieChart({
          size: 140,
          lineWidth: 6,
          lineCap: "square",
          barColor: "#22a7f0",
          trackColor: "#ffffff",
          scaleColor: !1,
          easing: 'easeOutBounce',
          animate: 5000,
          onStep: function(from, to, percent) {
          $(this.el).find('.percent').text(Math.round(percent));
          }
        });

        }

    }); 

});