как остановить анимацию в режиме ожидания при наведении указателя мыши

Question

У меня есть диаграмма,

Любой метод javascript будет работать для меня.

Остановить анимацию в setTimeout функция на зависании.

Я хочу анимацию, но она должна быть остановлена ​​при наведении курсора мыши, как только mouseleave анимация должна оживить.

Мой график:

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