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');
    });
});

顺便说一句：您的代码#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');
    });
});

具有淡入淡出效果的菜单

2 个答案: