如何創建動畫滑動窗口/標籤菜單？

Question

我創建的導航菜單中YUI 2.8如下：

使用CSS轉換我也動畫選項卡。瀏覽器不支持CSS轉換，我的動畫在Opera，IE等中不起作用。
由於我已經在該頁面上使用YUI 2.8，有人可以告訴我如何爲這些選項卡設置動畫效果嗎？
當我點擊任何選項卡時，它應該順利地在垂直方向上展開（動畫）。
下面是翼片的其中將要改變時，我選擇任何選項卡（下面的選項卡的屬性應該被動畫）的屬性：

• 鐵墊
• 邊距
• 背景顏色
• 邊框

請注意上圖：

• 選擇第一個標籤爲 時，情況＃1的右側空間很小。
• 如果情況＃2和情況＃3左側和右側都有空白。
• 在情況＃4中，當最後一個選項卡被選爲 時，左側留有一些空間。

Answer 1

YUI有一個不錯的Anim utility，你可以使用，並且是跨瀏覽器。使用YUI Anim來實現動畫的代碼非常簡單，因爲它處理了大部分轉換所需的計算。你的情況的一個例子是：

var tab1_open = new YAHOO.util.ColorAnim('tab1', { 
    padding : {to: 20}, 
    marginLeft : {from: 0, to: 30}, 
    marginTop : {from: 0, to 30}, 
    backgroundColor : {from: '#999', to: '#cecece'}, 
    borderColor : {to: '#000'} 
}, 0.5); 

然後啓動動畫只需撥打：

tab1_open.animate();