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

Question

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

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

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

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

我想要一个有按钮的菜单 simple ，圆 Angular 正方形(我认为这可以用 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>