Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2012, 21:36
Новичок на форуме
Отправить личное сообщение для Netherlandman Посмотреть профиль Найти все сообщения от Netherlandman
 
Регистрация: 23.08.2010
Сообщений: 9

Простое движение
Всем доброго времени суток.
Совсем недавно начал осваивать 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.
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2012, 21:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Netherlandman,
setTimeout(overLi(), 300);
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2012, 21:57
Новичок на форуме
Отправить личное сообщение для Netherlandman Посмотреть профиль Найти все сообщения от Netherlandman
 
Регистрация: 23.08.2010
Сообщений: 9

блин )) как я и думал все просто оказалось. а у меня на курсах в голове отложилось, что скобочки у функций опускаются только при привязке к событиям. Оказывается вот еще второй момент есть.
Спасиб Рони!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Движение объекта за курсором Алексаднр Элементы интерфейса 2 23.10.2011 21:01
Движение объекта в ячейке определённого размера lammeR Общие вопросы Javascript 4 20.04.2010 17:14
движение объекта lammeR Общие вопросы Javascript 5 08.03.2010 01:04
Движение скроллинга окна по направлению миши bobus123 Events/DOM/Window 0 02.09.2009 15:17
Движение обЪекта Rusel6 Элементы интерфейса 2 14.08.2009 14:49