如何使用 JQuery 为组的所有元素设置动画 - 菜单示例？

Question

我有一个例子：http://jsfiddle.net/kamaci/uVQZc/3/

当我为更大的蓝色 div 设置动画时，我也想调整按钮的大小。实际上，我可以在该 div 中放置更多元素，也可以在元素中放置元素。所以我需要一个通用结构，当更大的容器调整大小时，它的元素内部也会调整大小。

调整大小操作可以通过百分比来完成，但我找不到解决方案：question1

总而言之，我想做一个菜单，当用户单击该菜单上的按钮时，该菜单将转到左侧（带有动画）。相关问题：enter link description here

我想要一个带有类似simple 的按钮的菜单，圆角正方形（我认为这可以用 CSS3 完成）实际上作为一个例子，如果我可以使用那个按钮，那将是完美的。

我想使用 JQuery 和 Jquery 工具和 HTML5。（我对 CSS 没有深入的了解）

谢谢。

Answer 1

你基本上可以从Jquery / Jquery Tools Getting Smaller Effect 复制一个，但那个只能在兼容 CSS3 的浏览器中工作。更强大的解决方案如下所示：

See jsFiddle

CSS：

div {
  position: absolute;
  background-color: #abc;
  left: 110px;
  width: 300px;
  height: 200px;
  margin: 5px;
}
button {
  width: 32%;
  height: 48%;
  margin: 1% 0 0 1%;

  background: #00f;

  border: 1px solid #CCCCCC;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;

  background: -moz-linear-gradient(
    top,
    #f0f0f0 0%,
    #e3e3e3);
  background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#f0f0f0),
    to(#e3e3e3));
}

并删除<button>s 之间的所有空格，否则它们之间会出现空格（愚蠢，但确实如此）：

<div id="fd" class="block">
<button type="button">1!</button><button type="button">2!</button><button type="button">3!</button><button type="button">4!</button><button type="button">5!</button><button type="button">6!</button>
</div>