DIV CSS 佈局教程網

今天，我們繼續探索一下這個庫的Fx部分，我們將學習如何使用Fx.Morph（它從本質上可以讓你同時漸變多個樣式表屬性），然後我們再檢查一下應用到Fx.Tween和Fx.Morph的一些Fx選項，最後我們將看看如何使用Fx事件，譬如“onComplete”和“onStart”。通過這些選項和事件，我們可以獲得更好的控制權來控制形變動畫。

Fx.Morph

創建一個新的Fx.Morph

初始化一個新的形變和創建一個新的漸變很類似，除了你要指定多個樣式屬性以外。

1. // 首先，把我們的元素賦值給一個變量
2. var morphElement = $('morph_element');
3.  
4. // 現在，我們創建一個新的形變
5. var morphObject = new Fx.Morph(morphElement);
6.  
7. // 現在我們可以設置樣式屬性，就像Fx.Tween一樣
8. // 不過我們這裡可以設置多個樣式屬性
9. morphObject.set({
10.     'width': 100,
11.     'height': 100,
12.     'background-color': '#eeeeee'
13. });
14.  
15. // 我們也可以像啟動一個漸變一樣來啟動我們的形變
16. // 不過我們這裡要同時放置多個屬性值
17. morphObject.start({
18.     'width': 300,
19.     'height': 300,
20.     'background-color': '#d3715c'
21. });

上面這些就是全部的內容了，包括創建、設置和啟動一個形變。

為了讓這個更合理一些，我們應該創建我們的變量，把我們的函數獨立出來，並創建一些事件來控制這這個事情：

1. var morphSet = function(){
2.     // 這裡我們可以像Fx.Tween一樣設置樣式屬性
3.     // 不過在這裡我們可以同時設置多個樣式屬性
4.     this.set({
5.         'width': 100,
6.         'height': 100,
7.         'background-color': '#eeeeee'
8.     });
9. }
10.  
11. var morphStart = function(){
12.     // 我們也可以像啟動一個漸變一樣啟動一個形變
13.     // 不過現在我們可以同時設置多個樣式屬性
14.     this.start({
15.         'width': 300,
16.         'height': 300,
17.         'background-color': '#d3715c'
18.     });
19. }
20.  
21.  
22. var morphReset = function(){
23. &n