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

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