Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > mootools. остановка анимации в Fx.Slide

Автор: Sn0oSm0oMrIK 4.6.2010, 13:29

Здравствуйте. Недавно решил переписать некоторые элементы сайта с использованием mootools, включая меню
вот кусок кода с ним:

Код


<div id="navi">
<a id="navtr">Тренировка</a> || <a id="navch">Выбор щенка</a> || Аксессуары
<div id="subtr"><a href="train2.html">Выбор тренера</a> || <a href="obedience.html">Послушание</a> || <a href="training.html">Clicker Training</a> || <a href="protect.html">Защита</a> || <a href="handling.html">Хендлинг</a> || <a href="compulsion.html">О принуждении</a></div>
<div id="subch">Роль генетики || Почему важна порода? || Тест Кэмпбелла || Основы поведения || Охотничий и защитный инстинкты</div>
</div>

хотел сделать так, чтоб при наведении на пункты меню "тренировка" и "выбор щенка" плавно вылезало соответствующее подменю.

вот скрипт, который получился:

Код


window.addEvent('domready', function(){
    
var ontr, onch;
var stattr;
var statch;

ontr = new Fx.Slide( $('subtr'),{duration : 3000} ).hide(); //выставил такую задержку только для ловли бага
stattr=false;
onch = new Fx.Slide( $('subch'),{duration : 3000} ).hide();
statch=false;

    $('navtr').addEvent('mouseenter', function(){
    if (statch==true&stattr==false)
        
            {
            statch=false;
            stattr=true;
            onch.slideOut().chain(function()
                {

                ontr.slideIn();
                })
                
            }
            else
            {
                if (statch==false&stattr==false)
                {
                stattr=true;
                ontr.slideIn();
                }
                
                
            }
        }
    );
    
    
    
    $('navch').addEvent('mouseenter', function(){

            if (stattr==true&statch==false)
            {
            stattr=false;
            statch=true;
            ontr.slideOut().chain(function()
                {
                onch.slideIn();
                })
            }
            else
            {
                if (statch==false&stattr==false)
                {
                statch=true;
                onch.slideIn();
                }
            }
        }
    );


});

но с этим решением есть 2 проблемы:
1) если навести курсор на один пункт меню, а затем, не дождавшись окончания анимации, навести его на другой пункт, вылезают оба подменю. я вижу тут только 2 решения: или при наведении на второй пункт меню сразу прерывать анимацию первого или на время анимации первого пункта запретить mouseenter для второго. проблема в том, что я понятия не имею, как это сделать.
2)более эстетическая, чем практическая проблема. наверняка код скрипта можно сделать покороче, а то он какой-то раздутый получился.

очень надеюсь на вашу помощь.

зы: если есть простой способ сделать такое меню с помощью мутулза, но без использования фх.слайд, буду очень признателен, если поделитесь.