Бесконечная смена цвета текста
 

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

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

iGusse, ты правда веришь, что вокруг квадратных скобок объявления массива нужны круглые? По теме: по mouseout clearInterval сделай.

В книге так =))) http://www.ozon.ru/context/detail/id/4563273/


Пробовал делать clearInterval, все равно не останавливается
залил сюда http://gusse.ru/js/templates/

iGusse,

Я недавно скрипт изучаю пока мало что знаю, что там иметеься ввиду под таким синтаксисом? круглые это функция, или метод, квадратные это объектный литерал масива... для чего их объеденять?

извиняюсь я ошибся, в книге было только в квадратных скобках

Разобрался с clearInterval сделал так

colorsArray = ['#1fa8d0', '#6ad01f', '#d01f3c', '#000']
	function ani () {
		i = 0;
		while (i < colorsArray.length) {
			col = colorsArray[i]
			$('.wrap h2').animate(
				{
					color: col
				}, 1000
				)	
			 i++
		}
	}
	
	$('.wrap h2').mouseover(
		function () {
			ani()
			play = setInterval(ani,3000)
		}
	);
	
	$('.wrap h2').mouseout(
	function () 
		{
			clearInterval(play)
		}
	);