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