如何创建动画滑动窗口/标签菜单？

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