简易饼图没有：使用 Waypoint JS 加载动画答案

【问题标题】：Easy pie chart does not: loading animation using Waypoint JS简易饼图没有：使用 Waypoint JS 加载动画
【发布时间】：2014-06-26 10:41:08
【问题描述】：

我正在设计一个单页滚动网页。在网页中，我在技能页面中使用了简单的饼图。现在我想在到达技能页面时加载简单的饼图动画。我使用了航点 js，但它不起作用。当我在技能页面时它会加载动画，但是当我在顶部并刷新页面而不是转到技能页面时，它不起作用。

下面给出了我的代码

custom.js：

jQuery('.skill').waypoint(function() {
$('.chart1').easyPieChart({
animate: 4000,
barColor: '#000',
trackColor: '#ddd',
scaleColor: '#e1e1e3',
lineWidth: 15,
size: 152,
});
}, {
triggerOnce: true,
offset: 'bottom-in-view'
});

现在我该如何解决这个问题？

【问题讨论】：

你能提供一个工作的example吗？
jQuery('.skill').waypoint(function(event) { alert('你已到达航点'); });此代码工作正常。当我到达技能页面时，它起作用了。但我的动画不起作用。
您的问题的一个工作示例。试试JSFiddle

标签： javascript jquery html jquery-waypoints easypie

【解决方案1】：

你可以试试这个代码：

    $(window).scroll( function(){

    /* Check the location of each desired element */
    $('.skill').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 ){

        $('.skill').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));
          }
        });

        }

    }); 

});

【讨论】：