Всем доброго времени суток.
Совсем недавно начал осваивать javascript.
Сейчас пробую писать свой код, тренируюсь так сказать, но вот возникла проблемка, решить которую мне не дает скорее всего определенный пробел в знаниях, поэтому решил обратиться за помощью сюда.
Поставил себе задачу максимум - анимировать простое вертикальное меню, чтобы при наведении на один из пунктов он как бы подрагивал (по факту планирую менять marginLeft от нуля до 20 и обратно).
Сначала пробовал делать все через getElementsByTagName('li') внутри ul с id="navi", чтобы работало для всех пунктов меню, но столкнувшись с проблемами решил сделать все хотя бы для одного элемента.
Меню задается простым списком, вида:
<ul id="navi">
<li id="mainpage"><a href="#">ГЛАВНАЯ</a></li>
<li><a href="#">ФОТО</a></li>
<li><a href="#">ИНФО</a></li>
<li><a href="#">КОНТАКТЫ</a></li>
</ul>
в скрипте в head прописываю следующее:
window.onload = function()
{
var theli = document.getElementById('mainpage');
theli.style.marginLeft = 0+"px";
theli.onmouseover = overLi;
}
функция overLi
function overLi ()
{
var theli = document.getElementById('mainpage');
var temp = parseInt(theli.style.marginLeft);
if (temp < 20)
{
temp += 2;
theli.style.marginLeft = temp+"px";
setTimeout(overLi(), 300);
}
}
Как видите, для начала хочу добиться хотя бы плавного движения в одну сторону. Но в итоге результатом работы этого кода является то, что при наведении на пункт меню, он сразу же перемещается на 20 пикселей, что поидее должно происходит после 10 выполнений функции overLi с интервалом в 1/3 секунды, тоесть за 3 секунды.
Что самое интересное пробовал вставлять в функцию overLi alert, выбрасывающий значение переменной temp по ходу выполнения. Он работает исправно, каждый раз выдает увеличенное на 2 значение, обрываясь на 20.
