Есть массив с цветами:
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 не получится...
Спустя 8 минут, 2 секунды (8.10.2011 - 13:59) Invis1ble написал(а):
clearInterval(), не ?
Спустя 4 часа, 5 минут, 28 секунд (8.10.2011 - 18:04) iGusse написал(а):
Пробовал делать clearInterval, все равно не останавливается
залил сюда http://gusse.ru/js/templates/
залил сюда http://gusse.ru/js/templates/
Спустя 8 часов, 38 минут, 14 секунд (9.10.2011 - 02:42) redreem написал(а):
вот так работает:
colorsArray = (['#1fa8d0','#6ad01f', '#d01f3c']);
interval=100;
$('.wrap h2').hover(
function () {
animated=true;
setColInt($(this),interval);
},
function () {
clearInterval(colInt);
}
);
function setColInt(el,interval) {
colInt=setInterval(function() {
for (i in colorsArray) $(el).animate({color: colorsArray[i]}, interval);
}, interval * colorsArray.length);
}
Спустя 5 часов, 18 минут, 38 секунд (9.10.2011 - 08:01) iGusse написал(а):
Спасибо, я забыл отписаться, я тоже нашел решение
Но ваш вариант наверно будет правильнее =))
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(function(){ani();},3000)
}
);
$('.wrap h2').mouseout(
function ()
{
clearInterval(play)
}
);
Но ваш вариант наверно будет правильнее =))
Спустя 7 часов, 5 минут, 45 секунд (9.10.2011 - 15:07) redreem написал(а):
в hover в jQuery отлажена проблема двойного срабатывания. в вашем случае возможно это и не заметно, но если например анимировать менюшку - это сразу видно - mOver срабатывает по 2 раза.
Спустя 1 час, 5 минут, 34 секунды (9.10.2011 - 16:12) iGusse написал(а):
спасибо, буду знать