анимированное меню, многократный setInterval
доброго времени суток уважаемые коллеги, нуждаюсь в помощи!
вобщем делаю менюшку с движущимися тайтлами в разделах при наведении на них. вот код функций: function over(id) { timers = setInterval("move_right("+id+")", 5); } function out(id) { timers = setInterval("move_left("+id+")", 5); } function move_right(id) { t = parseInt(document.getElementById('title_'+id).style.paddingLeft, 10); document.getElementById('title_'+id).style.paddingLeft = (t+2)+'px'; if(t > 20) { clearInterval(timers); timers = null; } } function move_left(id) { t = parseInt(document.getElementById('title_'+id).style.paddingLeft, 10); document.getElementById('title_'+id).style.paddingLeft = (t-2)+'px'; if(t < 4) { clearInterval(timers); timers = null; } } и пэхэпэ: for($i=0; $i<10; $i++) { echo "<div id='menu_".$i."' style='width:100px; margin-top:2px; background:#ccc' onmouseover='over(".$i.")' onmouseout='out(".$i.")'> <div id='title_".$i."' style='padding-left:0px'>Title_".$i."</div> </div>"; } если на один раздел меню наводится, то всё прекрасно двигается, а если с одного раздела на другой передвинуть мышкой, запускается цикличная ошибка. я понимаю что дело в том, что новый элемент меню начинает пользовать те же функции, что и предыдущий, у которого ещё таймер не закончился и счётчики сбиваются. Но как же решить задачу, не 40 же функций делать (по 4 на каждый элемент меню)? уже пару часов туплю, в 4 утра гениальные решения отказываются посещать мою голову, вот и прошу хелпу |
function over(id){ document.getElementById('title_'+id)._state=1; setTimeout("move_right("+id+")", 5); } function out(id){ document.getElementById('title_'+id)._state=0; setTimeout("move_left("+id+")", 5); } function move_right(id){ var e = document.getElementById('title_'+id); if (!e._state) return; t = parseInt(e.style.paddingLeft, 10); e.style.paddingLeft = (t+2)+'px'; if(t < 20) setTimeout("move_right("+id+")", 5); } function move_left(id){ var e = document.getElementById('title_'+id); if (e._state) return; t = parseInt(e.style.paddingLeft, 10); e.style.paddingLeft = (t-2)+'px'; if(t > 4) setTimeout("move_right("+id+")", 5); } Вообще по поводу анимаций в блоге наверное скоро создам темку. Разработал функцию анимации намного превышающую возможности jQuery.animate этот вопрос смотрю оч трудно емкий для многих начинающих анимашников. |
огромное спасибо!
единственное, если кто ещё будет брать код, в последней строчке надо поправить: if(t > 2 ) setTimeout("move_ left ("+id+")", 5); буду ждать статью) |
|
Часовой пояс GMT +3, время: 18:01. |