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

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>