MooTools：淡出元素？

Question

我有一个Element对象，我目前正在调用.hide（）。相反，我希望将整个元素（及其子元素）的不透明度淡出为100％（隐藏），作为500 ms或1000 ms的过渡效果。

可以使用Fx.Tween吗？这是否可能 - MooTools框架在它的UI库中有这样的效果吗？

Answer 1

使用

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

它会自动淡入和淡出根据其状态的对象。

实施例：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在它的FX.Tween软件包中有一个fade（）方法，如here所示。

Answer 3

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

将元素不透明度设置为70％。或

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

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

元法：褪色
元素快捷键与透明度调整 方法。有用的 用于淡入一个元素进出，或者对某个不透明度级别为 。

Answer 4

在MooTools的1.3可以设置二层'选项，如持续时间或过渡，这样的：

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

参见的jsfiddle例如http://jsfiddle.net/tofu/VU7Es/

和文档http://mootools.net/docs/core/Fx/Fx.Tween#Element-Properties:tween