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

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);

这是 fiddle ，它解释了我的问题

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();