Mootools 1.2教程 滑动效果（Slide）
2024-05-06 14:13:57
供稿：网友
基本用法
就像我们前面看过的所有类一样，我们在把这个类应用到一个元素上面时，我们要做的第一件事就是初始化一个新的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也有一些自己的选项。
Fx.Slide选项
Fx.Slide只有两个选项——“mode”和“wrapper”。坦白地说，我从来没有发现我自己使用过“wrapper”（我从来没有遇到过这种需求），不过“mode”决定了你是希望水平滑动还是垂直滑动。
mode（模式）
模式给了你两个选择——“垂直”或者“水平”。垂直是从顶部到底部的显示，水平是从左边到右边的显示。这里没有从底部到顶部或从右边到左边的选项。不过我知道修改类本身来实现这些功能是相对简单的。在我看来，我还是希望这能成为一个标准的选项，如果有人已经修改了这个类并允许这些选项，请给我们留言。
wrapper（包装器）
在缺省情况下，Fx.Slide会在你的滑动元素的外面添加一个包装器，并指定其“overflow”属性的值为“hidden”。wrapper允许你设置其他元素作为该元素的包装器。就像我上面所说的，我不清楚它在那里会被用到，我也有兴趣听到任何关于这个东西的想法。（感谢mooforum.net的horseweapon让我明白这个一点。）
Fx.Slide的方法
Fx.Slide也提供了许多方法来显示或者隐藏元素。
.slideIn()
正如名字所告诉你的，该方法讲触发start（开始）时间并显示你的元素。
.slideOut()
滑动元素到隐藏状态。
.toggle()
这个方法有可能显示或者隐藏元素，结果完全取决于这个元素的当前状态。用于点击事件时非常有用。
.hide()
这将隐藏元素，但不使用滑动效果。
.show()
这将显示元素，但不使用滑动效果。
通过方法重新设置模式选项
上面的每个方法均可以接受一个可选的mode参数，允许你覆盖之前设置的选项。
参考代码：
代码如下:
slideVar.slideIn('horizontal');
