CODEWITHSUNDEEP
mootoolsfadeout
JamesBrownIsDead
JamesBrownIsDead

Reputation: 4715

MooTools: Fade out element?

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?

Upvotes: 2

Views: 7260

Answers (4)

drivenuts
drivenuts

Reputation: 1049

In MooTools 1.3 you can set the 'tween' options, such as duration or transition, like this:

$('tweener').set('tween', {duration: 2000}).fade('out');

See also jsfiddle example http://jsfiddle.net/tofu/VU7Es/

and the docs http://mootools.net/docs/core/Fx/Fx.Tween#Element-Properties:tween

Upvotes: 3

Zaje
Zaje

Reputation: 2309

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>

Upvotes: 2

JCasso
JCasso

Reputation: 5523

 $('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.

Upvotes: 3

Duroth
Duroth

Reputation: 6581

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

Upvotes: 1

Related Questions