javascript - 如何创建动画滑动窗口/选项卡菜单？

Question

我在 YUI 2.8 中创建了导航菜单，如下所示：

我也有使用 CSS 过渡的动画标签。浏览器不广泛支持 CSS 过渡，并且我的动画在 Opera、IE 等中不起作用。
由于我已经在该页面上使用 YUI 2.8，有人可以告诉我如何为这些选项卡设置动画吗？
当我单击任何选项卡时，它应该在垂直维度上平滑扩展（动画）。
以下是当我选择任何选项卡时将更改的选项卡属性（选项卡的以下属性应为动画）：

• 填充物
• 边距
• 背景颜色
• 边框

请注意上图中：

• 选择第一个选项卡时，在 #1 的情况下，右侧几乎没有空间。
• 在案例#2 和案例#3 的左侧和右侧都有空间。
• 在情况 #4 中，选择最后一个选项卡时，左侧会留下一些空间。

Answer 1

YUI 有一个不错的Anim 实用程序，您可以使用它并且是跨浏览器。使用 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();