Question

我试图淡入一个隐藏的元素，然后使用mootools再次淡出它。

我不能只使用$('my_div').fade('toggle')，因为这假设元素始终可见，而我的div以display:none开头。

是否有一种简单的方法可以将淡入/淡出与幻灯片放入/放出或其他方式相结合以获得良好的效果？

Answer 1

我几乎总是在Mootools.More中使用Fx.Reveal：

http://mootools.net/docs/more/Fx/Fx.Reveal

非常漂亮的淡入动画，你几乎没有任何努力。 Fx.Slide也可以做到这一点，虽然它往往更加繁琐。

如果您不想使用Mootools.More，那么使用Fx.Morph滚动您自己的解决方案同时更改高度和不透明度也可以解决问题。

Answer 2

我也喜欢使用display: none。当你想淡化元素时，你可以使用这段代码：

淡出：

$('my_div').setStyle('display', 'block');
$('my_div').fade('in');

并淡出：

$('my_div').fade('out');
$('my_div').setStyle('display', 'none');

或者，您可以设置一个名为.hide的类，其中设置了display: none，并将该类放在元素上以开始。然后它使代码更容易：

$('my_div').toggleClass('hide');
$('my_div').fade('toggle');

Answer 3

从不透明度开始：0并显示：block。这样你就可以使用fade（）

Answer 4

我这样做：我没有隐藏CSS中的元素（如果您使用过«display：none»或«visibility：hidden»，请在尝试我的建议之前删除它们 ）。相反，在“domready”中，我使用«fade（'hide'）»来隐藏元素。这样，我可以稍后将“淡入淡出（'in'）»和”淡入淡出（'out'）»应用于它。

Answer 5

虽然您可以使用More来突出显示元素，但使用延迟或链并不难。这是一个小提琴：http://jsfiddle.net/kLn77n6t/2/

方法＃1：

function inout(el){
    el.fade('in').fade.delay(1000, el, 'out');
    }
inout($('fader'));

（我们将元素传递给delay（），否则它不知道“this”是什么。）

方法＃2：

与之前相同，但使用CSS类设置淡入淡出属性，添加和删除类：

<style>
    #fader{opacity:0; transition:opacity 0.5s ease;} 
    #fader.show{opacity:1}
</style>
<script>
    function inout(el){
        el.addClass('show').removeClass.delay(1000, el, 'show');
        }
    inout($('fader'));
</script>

方法＃3：

“正确”的方法应该是链接补间，但我还没试过。如果您需要，请发表评论。 “Hacky”链接不起作用：

$('fader').set('tween', {duration:'long', link: 'chain'});    
function inout(){ $('fader').tween('opacity',1).tween('opacity',0); }

如何使用Mootools淡入和淡出隐藏元素

5 个答案:

方法＃1：

方法＃2：

方法＃3：