DIV CSS 佈局教程網

今天我們開始第三講，我們今天主要看一下Fx.Tween。和我們看到的其他的MooTools函數一樣，這些方法使用起來都非常簡單，但是功能都很強大。Tween可以讓你添加那些極“炫”的效果——可以很平滑地發生形變動畫，從而改善你的用戶體驗。

Tween的快捷方法

我們通常都從“基本知識”入手，不過MooTools 1.2只為漸變（tween）提供了這樣極其出色的快捷方法，它們使用起來都極其簡單以至於我忍不住要從這裡開始。

.tween();

一個漸變（tween）是一個在兩個樣式屬性值之間的平滑的變化。舉個例子，通過漸變（tween）你可以把div的寬度（width）平滑地由100像素變化為300像素。

1. // 創建一個新的函數
2. var tweenerFunction  = function() {
3.     // 選中你要使用漸變的元素
4.     // 然後加上.tween
5.     // 最後聲明你要變化到的屬性和值
6.     $('tweener').tween('width', '300px');
7. }
8.  
9. window.addEvent('domready', function() {
10.     // 在這裡給一個按鈕添加一個事件
11.     // 當點擊時初始化這個漸變
12.     // 並調用我們的漸變函數
13.     $('tween_button').addEvent('click', tweenerFunction);
14. });

相應於上面的代碼，我們的HTML代碼看起來大概應該是這樣的：

1. <div id="tweener"></div>
2. <button id="tween_button">300 width</button>

.fade();

這個方法可以讓你平滑地調整一個元素的不透明度（opacity）。這個使用起來和上面的例子幾乎一模一樣：

1. // 創建一個新函數
2. var tweenFadeFifty = function() {
3.     // 在這裡創建你的選擇器
4.     // 然後添加.fade
5.     // 最後聲明一個0到1之間的值（0代表不可見，1代表完全可見）
6.     $('tweener').fade('.5');
7. }
8.  
9. window.addEvent('domready', function() {
10.     // 在這裡給按鈕添加一個事件
11.     // 點擊時初始化這個漸變
12.     // 並調用我們的漸變函數
13.     $('tween_fade_fifty').addEvent('click', tweenFadeFifty);
14. });

1. <div id="tweener">
2. <button id="tween_fade_fifty">Fade to fifty percept opacity</button>

.highlight();

醒目（highlight）是一個目標非常明確（也極其有用）的漸變快捷方法，它提供了兩個功能：