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

Question

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 1

Start out with opacity:0 and display:block. That way you can use fade()

Answer 2

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.

Answer 3

I do this: I don't hide the element from CSS (if you have used «display: none» or «visibility: hidden», please remove them before trying what I'm suggesting). Instead, in «domready», I use «fade('hide')» to hide the element. This way, I can later apply «fade('in')» and «fade('out')» to it.

Answer 4

I prefer using display: none as well. You can just use this code when you want to fade the element:

To fade in:

$('my_div').setStyle('display', 'block');
$('my_div').fade('in');

and to fade out:

$('my_div').fade('out');
$('my_div').setStyle('display', 'none');

Alternatively, you could just setup a class that is called .hide with display: none set in it, and put that class on your element to start with. Then it makes the code easier:

$('my_div').toggleClass('hide');
$('my_div').fade('toggle');