За последние 24 часа нас посетили 19564 программиста и 1656 роботов. Сейчас ищут 1535 программистов ...

Плавное меню, проблемы

Тема в разделе "JavaScript и AJAX", создана пользователем Padaboo, 4 фев 2010.

  1. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    [js]function Menu(obj)
    {
    menuid=obj.id;
    mymenu = document.getElementById(menuid);
    for (i=20;i<110;i++){
    b=i;
    setTimeout('mymenu.style.height="'+b+'"',i*20);

    }
    }
    function MenuOut(obj)
    {
    menuid=obj.id;
    mymenu = document.getElementById(menuid);
    for (i=-110;i<-20;i++){
    b= -i;
    setTimeout('mymenu.style.height="'+b+'"',i*20);

    }
    }[/js]

    HTML:
    1. <div style="background-color: black;height: 100px;" id="top"></div>
    2. <div style="background-color: yellow;float: left;height: 20px;width:120px;" id="m1" onMouseOver="Menu(this)" onMouseOut="MenuOut(this)"></div>
    3. <div style="background-color: black ;float: left;height: 20px;width:2px;" id="t1"></div>
    4. <div style="background-color: yellow;float: left;height: 20px;width:120px;" id="m2" onMouseOver="Menu(this)" onMouseOut="MenuOut(this)"></div>
    5. <div style="background-color: black ;float: left;height: 20px;width:2px;" id="t2"></div>
    6. <div style="background-color: yellow;float: left;height: 20px;width:120px;" id="m3"onMouseOver="Menu(this)" onMouseOut="MenuOut(this)"></div>
    7. <div style="background-color: black ;float: left;height: 20px;width:2px;" id="t3"></div>
    8. <div style="background-color: yellow;float: left;height: 20px;width:120px;" id="m4" onMouseOver="Menu(this)" onMouseOut="MenuOut(this)"></div>
    9. <div style="background-color: black ;float: left;height: 20px;width:2px;" id="t4"></div>
    10. <div style="background-color: yellow;height: 20px;" id="t5"></div> 
    Делая плавно выдвигающееся меню, проблема в том что оно выдвигается плавно, а вот складывается обратно быстро слишком... не могу понять в чем дело.
    Попутно вопрос, как заблокировать повторное выполнение функции во время выполнения? или как сделать чтобы функция одновременно не увеличивала один и тот же див
     
  2. Volt(220)

    Volt(220) Активный пользователь

    С нами с:
    11 июн 2009
    Сообщения:
    1.640
    Симпатии:
    1
    Думаю проблема вот в этом:
    [js]for (i=-110;i<-20;i++){...}
    [/js]

    Например с помощью статической или глобальной булевой переменной.

    Например с помощью той же переменной, но уже не булевой, а в типа массив. В него пихать те дивы/id дивов над которыми происходит действие. Ну и не забывать их от туда доставать.[/js]
     
  3. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    Большое спасибо!
    Вроде бы условие то правильное (( не знал что нельзя отрицательные числа использовать(
     
  4. Volt(220)

    Volt(220) Активный пользователь

    С нами с:
    11 июн 2009
    Сообщения:
    1.640
    Симпатии:
    1
    Вопрос не в отрицательных числах, а в их использовании:
    Код (Text):
    1. setTimeout('mymenu.style.height="'+b+'"',i*20);
    Кстати, можно цикл еще так сделать:
    Код (Text):
    1. for (i=110;i>20;i--)
    И еще одно кстати, почему i*20, а не просто 500 например?
     
  5. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    cпасибо, что то мне такое в голову совсем не пришло)
    а вот по поводу почему не просто 500 он моментально все это делает
    http://www.php.ru/forum/viewtopic.php?t=22462
     
  6. Volt(220)

    Volt(220) Активный пользователь

    С нами с:
    11 июн 2009
    Сообщения:
    1.640
    Симпатии:
    1
    Действительно.
    Кстати, чтоб он нормально уезжал надо делать (130-i)*20. Ну или (130+i)*20 для отрицательных чисел
     
  7. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
  8. Simpliest

    Simpliest Активный пользователь

    С нами с:
    24 сен 2009
    Сообщения:
    4.511
    Симпатии:
    2
    Адрес:
    Донецк
    под ИЕ8 не работает
    Плюс глюки, если во время анимации перевести мышку на треугольник другой панели, то начинает анимироваться именно она, а первоначальная умирает на полдороги.