Меню с эффектом затухания

Question

Если вы заходите на мой сайт (www.actemp.es), и вы нажимаете кнопку меню (вверху справа), вы увидите, что в первый раз меню не появляется с постепенным исчезновением, но в других случаях да , Я хочу, чтобы он исчезал даже первым. Я не говорю по-английски очень хорошо = D

Вот мой код:

window.addEvent('domready', function(){ 
    $('fadeout').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu').fade('out'); 
    }); 
    $('fadein').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu').fade('in'); 
    }); 
}); 
window.addEvent('domready', function(){ 
    $('fadeout').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu2').fade('out'); 
    }); 
    $('fadein').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu2').fade('in'); 
    }); 
}); 
window.addEvent('domready', function(){ 
    $('fadeout').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu3').fade('out'); 
    }); 
    $('fadein').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu3').fade('in'); 
    }); 
}); 
window.addEvent('domready', function(){ 
    $('fadeout').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu4').fade('out'); 
    }); 
    $('fadein').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu4').fade('in'); 
    }); 
}); 

Answer 1

Mootools использует непрозрачность исчезать и выход. Так что добавьте opacity:0; в свой CSS (для #menu, #menu2 & #menu3 и он должен работать.)

Я попробовал это на своей странице и работал. Вы также можете попробовать этот код:
(вы можете в любом случае использовать CSS, чтобы исправить это).

window.addEvent('domready', function(){ 

    //this sets opacity to 0 
    $('menu').setOpacity(0); 
    $('menu2').setOpacity(0); 
    $('menu3').setOpacity(0); 
    $('menu4').setOpacity(0); // #menu4 is missing in the html 
    // 

    $('fadeout').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu').fade('out'); 
     $('menu2').fade('out'); 
     $('menu3').fade('out'); 
     $('menu4').fade('out'); 
    }); 
    $('fadein').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu').fade('in'); 
     $('menu2').fade('in'); 
     $('menu3').fade('in'); 
     $('menu4').fade('in'); 
    }); 
}); 

Btw: У вас есть элемент отсутствует в коде #menu4.

Answer 2

Во-первых, я не думаю, что вам нужно отделить обработчики на четыре блока, как это. При этом добавляется то же событие domready, и добавляются те же два события click. Попробуйте провести реструктуризацию:

window.addEvent('domready', function(){ 
    $('fadeout').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu').fade('out'); 
     $('menu2').fade('out'); 
     $('menu3').fade('out'); 
     $('menu4').fade('out'); 
    }); 
    $('fadein').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu').fade('in'); 
     $('menu2').fade('in'); 
     $('menu3').fade('in'); 
     $('menu4').fade('in'); 
    }); 
}); 

Посмотрите, если это поможет. Мое предположение заключается в том, что проблема может заключаться в window.addEvent('domready', function(). Это событие очень скоро срабатывает в последовательности загрузки страницы, которая может быть проблемой. Может быть, попробовать окружающие коды с помощью функции JQuery OnLoad вместо:

$(function(){ 
    $('fadeout').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu').fade('out'); 
     $('menu2').fade('out'); 
     $('menu3').fade('out'); 
     $('menu4').fade('out'); 
    }); 
    $('fadein').addEvent('click', function(evento){ 
     evento.preventDefault(); 
     $('menu').fade('in'); 
     $('menu2').fade('in'); 
     $('menu3').fade('in'); 
     $('menu4').fade('in'); 
    }); 
});