Question

我有6个图表

$('.chart-1').hover(function(e) {
    $('.chart-1').easyPieChart({
        lineCap: 'square',
        lineWidth: '4',
        barColor: '#E81F4D',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
    $('.chart-1').data('easyPieChart').enableAnimation();
});


$('.chart-2').hover(function(e) {
    $('.chart-2').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#971FE8',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });

});

$('.chart-3').hover(function(e) {
    $('.chart-3').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#1F8CE8',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });

});


$('.chart-4').hover(function(e) {
    $('.chart-4').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#1AB356',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });

});


$('.chart-5').hover(function(e) {
    $('.chart-5').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#EDE20E',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});


$('.chart-6').hover(function(e) {
    $('.chart-6').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#FC7402',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

我想在用户将鼠标悬停在其上时触发动画，我已经尝试了上面的代码，但仍然无法正常工作。

任何人都可以帮忙吗？

Answer 1

这可能很愚蠢，但是您所需要的只是动画吗？

第一个，您必须使用animate参数声明图表，因此它具有延迟。其次，您必须创建悬停事件。然后看起来像这样

（我只举一个例子）

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://rendro.github.io/easy-pie-chart/javascripts/jquery.easy-pie-chart.js"></script>
    <link rel="stylesheet"type="text/css" href="https://rendro.github.io/easy-pie-chart/stylesheets/jquery.easy-pie-chart.css">
  </head>
  <body>
    <div class="chart" data-percent="73">73%</div>
  </body>
</html>

$('.chart').easyPieChart({
        animate: 1000
    });
    
$('.chart').mouseenter(() => {
    $('.chart').data('easyPieChart').update(0);
    $('.chart').data('easyPieChart').update(parseInt($('.chart')[0].dataset.percent));
})

这是示例：https://jsfiddle.net/9wuog48m/

悬停时触发图表动画-easyPieChart

1 个答案: