Здравствуйте. 
Есть массив с цветами:
var colorsArray = (['#1fa8d0', '#6ad01f', '#d01f3c'] );
Есть заголовок h2. Нужно сделать так, чтобы при наведении курсора на заголовок его цвет менялся по кругу, на цвета из массива по очереди. Плавно перетекал. Сделал это вот так:
$('.wrap h2').mouseover(
	function () 
		{
			colorAni($(this), 1000)
		}
	);
	
	function colorAni(el, interval) 
	{
		var colorsArray = (['#1fa8d0', '#6ad01f', '#d01f3c'] );
		i = 0;
		while (i < colorsArray.length) {
			col = colorsArray[i]
			el.animate(
				{
					color: col
				}, interval )		
			i++	
		}
		setInterval(colorAni(el, interval), interval * colorsArray.length)
	}
Но возникла проблема. Как при отведении курсора остановить смену цвета? Как я понял остановить функцию в onmouseover не получится...