Question

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

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

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

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

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

我想使用JQuery和Jquery Tools以及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>之间的所有空格，因为否则它们之间会有空格（愚蠢，但却是真的）：

<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>

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

1 个答案: