MooTools: élément de fondu?

Question

J'ai un objet Element que j'appelle actuellement .hide(). Au lieu de cela, je voudrais fondre l'opacité de l'élément entier (et ses enfants) à 100% (caché) comme un effet de transition sur peut-être 500 ms ou 1000 ms.

Peut-on utiliser Fx.Tween pour cela? Est-ce possible - est-ce que le framework MooTools a un effet comme celui-ci dans sa bibliothèque d'interface utilisateur?

Answer 1

Utilisez

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

il disparaîtra automatiquement et disparaître l'objet en fonction de son état.

Exemple: 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 2

MooTools a une méthode fade() dans son package FX.Tween, comme vu here.

Answer 3

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

définit l'opacité de l'élément à 70%. Ou

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

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

Élément Méthode: fanent
élément raccourci méthode pour tween avec opacité. Utile pour un fondu entrant et sortant d'un élément ou vers un certain niveau d'opacité.

Answer 4

Dans MooTools 1.3, vous pouvez définir les options 'tween', comme la durée ou de transition, comme ceci:

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

Voir aussi l'exemple jsFiddle http://jsfiddle.net/tofu/VU7Es/

et les documents http://mootools.net/docs/core/Fx/Fx.Tween#Element-Properties:tween