mootools - MooTools：淡出元素？

Question

我有一个 Element 对象，我目前正在调用 .hide() 。相反，我想将整个元素（及其子元素）的不透明度淡化为 100%（隐藏），作为可能超过 500 毫秒或 1000 毫秒的过渡效果。

Fx.Tween 可以用于这个吗？这可能吗——MooTools 框架在其 UI 库中是否有这样的效果？

Answer 1

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

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

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

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

元素方法：渐变
元素的快捷方法，用于不透明度的补间。用于淡入和淡出元素或淡化到某个不透明度级别。

Answer 2

在 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

Answer 3

采用

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

MooTools 的 FX.Tween 包中有一个 fade() 方法，如下所示。