0

如果您访问我的网站 ( 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');
    });
});
4

2 回答 2

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。

于 2013-08-28T15:56:10.187 回答
-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');
    });
});
于 2013-08-28T14:43:05.720 回答