Question

我有一张图表，

任何javascript方法都适用于我。

在悬停时停止setTimeout功能中的动画。

我想要动画但是它应该在鼠标悬停时停止，一旦鼠标移动动画应该动画。

我的图表：

var chart = c3.generate({
    data: {
        rows: [
            ['data4', 'data2', 'data3'],
            [90, 120, 300],
            [40, 160, 240],
            [50, 200, 290],
            [120, 160, 230],
            [80, 130, 300],
            [90, 220, 320]
        ],
        type: 'bar'
    }
});

setTimeout(function () {
    chart.transform('line', 'data4');
}, 2500);
setTimeout(function () {
    chart.transform('area', 'data2');
}, 5000);
setTimeout(function () {
    chart.transform('spline', 'data3');
}, 7500);

这是小提琴，它解释了我的问题

http://jsfiddle.net/sELst/6/

感谢您查看

Answer 1

这样的东西？：http://jsfiddle.net/sELst/9/

var interval = null;
var rotateGraphs = function () {
    if (currentChart < charts.length) {
        interval = setInterval(function () {
            chart.transform(charts[currentChart].type, charts[currentChart].data);
            currentChart++;

            if (currentChart >= charts.length) {
                clearInterval(interval);
                interval = null;
            }
        }, 2500);
    }
}
var chartElement = document.getElementById('chart');
chartElement.addEventListener('mouseover', function () {
    clearInterval(interval);
    interval = null;
}, false);

chartElement.addEventListener('mouseout', function () {
    rotateGraphs();
}, false);

rotateGraphs();

如何在鼠标悬停时设置超时功能停止动画

1 个答案: