动画宽度和水平边距保持框大小

Question

我有一个 UL，所有的 LI 都被平方并浮动到左边。我想为它们设置动画，以便它们从 50% 的大小开始在宽度和高度上都增长，但保持它们的位置。

我能想到的唯一方法（不添加新标记）是从边距（每个宽度和高度的 25%）开始，并在增加尺寸的同时减少边距。但是，即使使用线性缓动，jQuery 的 animate() 的总和也不会保持不变：margin-left+width+margin-right。

如何使用 jQuery 的 animate() 为 DIV 设置动画？

这是我的代码.. 初始状态：

items.css({
       opacity:0,
       marginTop: 17,
       marginRight: 17,
       marginBottom: 18,
       marginLeft: 19,
       width: 78,
       height: 78
    });

动画：

items.animate({
        opacity:1,
        marginTop: 0,
        marginRight: 0,
        marginBottom: 1,
        marginLeft: 2,
        width: 112,
        height: 112
    }, 'slow', 'linear');

Answer 1

这是一个例子： http://jsfiddle.net/TabUc/1/

编辑： 这是 div 和按钮抖动的修复 http://jsfiddle.net/jYHtr/2/