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

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

我不能只使用

$（'my_div'）.fade（'toggle'）

，因为这假设元素始终可见，而我的div以

display:none开始

有没有一种简单的方法可以将淡入/淡出和滑入/淡出相结合，或者其他一些方法来实现一个好的效果？
从不透明度：0和显示：块开始。这样你就可以使用fade（）
我几乎总是在Mootools中使用Fx.Reveal。更多信息：


非常好的淡入动画，几乎没有你的努力。Slide也可能起作用，尽管它往往更为精细

如果您不想使用Mootools.More，那么使用Fx.Morph滚动您自己的解决方案以同时更改高度和不透明度也可以达到目的。
我这样做：我不会对CSS隐藏元素（如果您使用了«显示：无»或«可见性：隐藏»，请在尝试我的建议之前删除它们）。相反，在«domready»中，我使用«fade（'hide'）»隐藏元素。这样，我以后可以对其应用“淡入”和“淡出”。
我更喜欢使用
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');

虽然您可以使用更多来突出显示元素，但使用延迟或链并不困难。这是一把小提琴：

方法#1：
（我们将元素传递给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>

我不想在我的页面中间有一大块空白。你是什么意思？空白区是元素消失的地方。如果不需要空间，则在开始时将宽度和高度设为0，并在开始和结束之间设为0。想想看，老兄，第二句话其实是一个可能有用的答案。
<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>

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