mootools - Menu with fade effect -
if go website (www.actemp.es) , click on menu button (right top), you'll see first time, menu doesn't appear fade, other times yes. want fade first. don't speak english =d
here code:
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'); }); });
mootools uses opacity fade in , out. add opacity:0; css (for #menu, #menu2 & #menu3 , should work.)
i tried on page , worked. can try code also:
(you can anyway use css fix this).
window.addevent('domready', function(){ //this sets opacity 0 $('menu').setopacity(0); $('menu2').setopacity(0); $('menu3').setopacity(0); $('menu4').setopacity(0); // #menu4 missing in 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: have element missing in code #menu4.
Comments
Post a Comment