Mootools 1.2教程(23)——滑动效果（Slide）

  先废话几句，这第23篇教程一直没有翻译出来，直到今天我看到待审评论里面有这么一条超长的评论，结果一看，居然是这篇教程的翻译稿。这位热心的Mootools爱好者是Fanhp，非常感谢你的辛勤劳动！同时，我感到非常羞愧，实在是有愧大家的期望！愧疚是要拿行动来补的，于是我赶紧对此篇翻译进行了一些整理，修改了其中部分词句，并整理了示例代码。

原文地址：30 Days of Mootools 1.2 Tutorials - Day 23 - Fx.Slide

使用Fx.Slid显示元素

译者：Fanhp，整理：Fdream

阅读上一篇：Mootools 1.2教程(22)——同时进行多个形变动画

今天继续我们的Mootools 1.2教程的第23课，我们今天来讲一下Fx插件中的Fx.Slide。通过该插件，可以让你把内容以滑动的方式显示出来。它使用起来非常简单，是你UI工具箱中一个很好的工具。

基本用法

就像我们前面看过的所有类一样，我们在把这个类应用到一个元素上面时，我们要做的第一件事就是初始化一个新的Fx.Slide实例。

首先，让我们为滑动元素建立一个HTML文件。

参考代码： 

<div id="slide_element" class="slide">这里是要滑动显示的内容。</div>

我们的CSS也不需要任何修饰。

参考代码： 

.slide { 
    margin: 20px 0; 
    padding: 10px; 
    width: 200px; 
    background-color: #DAF7B4; 
}

最后，我们来初始化一个新的Fx.Slide并给它传递我们的元素变量。

参考代码： 

var slideElement = $('slide_element'); 

var slideVar = new Fx.Slide(slideElement, { 
    // Fx.Slide选项 
    mode: 'vertical', // 默认是'vertical'（垂直） 

    // Fx选项 
    transition: 'sine:in', 
    duration: 300,  

    // Fx事件 
    onStart: function(){ 
        $('start').highlight("#EBCC22"); 
    } 

由于Fx.Slide是Fx的一个扩展，因此你可以使用Fx的任何选项和事件，不过Fx.Slide也有一些自己的选项。