MooTools: Fade out element?

Question

I have an Element object that I'm currently calling .hide() on. Instead, I'd like to fade out the opacity of the entire Element (and its children) to 100% (hidden) as a transition effect over maybe 500 ms or 1000 ms.

Can Fx.Tween be used for this? Is this possible--does the MooTools framework have an effect like this in its UI library?

Answer 1

MooTools has a fade() method in it's FX.Tween package, as seen here.

Answer 2

 $('myElement').fade(0.7);

sets the element opacity to 70%. Or

$('myElement').fade('out'); // fades the element out.

http://mootools.net/docs/core/Fx/Fx.Tween#Element:fade

Element Method: fade
Element shortcut method for tween with opacity. Useful for fading an Element in and out or to a certain opacity level.

Answer 3

Use

 $('myElement').fade('toggle')`;

it will automatically fade in and fade out the object depending upon its state.

Example : HTML

    <div style='background-color:black;color:white' id="tweener">
        HELLO WORLD
    </div>

    <button onclick="javascript:doTween()">TWEEN</button>

<script type='text/javascript'>
    function doTween()
    {

       $('tweener').fade('toggle'); // out, in are other options available.
    }
</script>

Answer 4

yes but can I specifie the time of the fade out in ms ?