jQuery圆形菜单展开动画

圆形菜单展开的交互动效，真的蛮有趣的。用的是 jQuery 加 CSS3 的组合，写法也不难，主要靠 .animate() 和 delay() 来搞定一个个菜单项的顺序动画，效果挺顺滑的。

菜单结构也清爽，就是一个包裹着几个小圆按钮的容器。样式上靠 border-radius 把元素变成圆形，再加点 opacity: 0 或 display: none 让它们一开始先藏起来，点一下按钮再慢慢展开。

像下面这段代码，就是菜单项依次弹出来的典型写法：

$("#trigger").click(function() {
  $(".menu-item").each(function(index) {
    $(this).delay(index * 200).animate({
      opacity: 1,
      width: "50px",
      height: "50px",
      transform: "translateX(0)"
    }, 500);
  });
});

你可以在 点击事件里调整一下 delay 和动画时间，做出更炫的展开节奏，配上 transition 还能再润色一层，挺顺滑的。

如果你对菜单动画比较感兴趣，下面这几个资源也挺值一看的：

• jQuery 圆形动画展开图标菜单代码.zip
• jquery 点击展开菜单
• jquery 收缩菜单点击展开收缩菜单代码
• 鼠标点击展开的动画菜单.rar

建议你先自己撸一遍代码，熟悉下 .each() 的节奏控制和 .animate() 的写法。如果你喜欢做交互动效，这类小功能用得还挺多的。