How do I fade in and out a hidden element using Mootools

javascript mootools
Brian Ramsay picture Brian Ramsay · Sep 1, 2009 · Viewed 20k times · Source

I am trying to fade in a hidden element, and then fade it back out again using mootools.

I can't just use $('my_div').fade('toggle'), because that assumes the element is always visible, whereas my div starts out with display:none.

Is there a simple way to combine a fade in/out with a slide in/out or some other way to achieve a nice effect?

Answer

One Crayon picture One Crayon · Sep 20, 2009

I almost always use Fx.Reveal in Mootools.More:

http://mootools.net/docs/more/Fx/Fx.Reveal

Very nice fade-in animation, almost no effort on your part. Fx.Slide might also do the trick, although it tends to be more fiddly.

If you don't want to use Mootools.More, then rolling your own solution with Fx.Morph to change both height and opacity simultaneously could also do the trick.

Related questions

Uncaught SyntaxError: Unexpected token :

I am running an AJAX call in my MooTools script, this works fine in Firefox but in Chrome I am getting a Uncaught SyntaxError: Unexpected token : error, I cannot determine why. Commenting out code to determine where the bad code …

Read More
Comparing date part only without comparing time in JavaScript

What is wrong with the code below? Maybe it would be simpler to just compare date and not time. I am not sure how to do this either, and I searched, but I couldn't find my exact problem. BTW, when …

Read More
event.preventDefault() function not working in IE

Following is my JavaScript (mootools) code: $('orderNowForm').addEvent('submit', function (event) { event.preventDefault(); allFilled = false; $$(".required").each(function (inp) { if (inp.getValue() != '') { allFilled = true; } }); if (!allFilled) { $$(".errormsg").setStyle('display', ''); return; } else { $$('.defaultText').each(function (input) { if (input.…

Read More