Question

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

可以使用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（）方法，如here所示。

MooTools：淡出元素？

4 个答案: