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');
