[iGusse]

Здравствуйте.
Есть массив с цветами:

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 не получится...