使用jQuery动画进行图片扩展会推动其他人

Question

我正在开发一个电子商务网站，我的客户希望将产品图片悬停在类别页面上进行扩展。

产品图片在<li>内的<ul>内组织，我将它们设置为每行中有4个，使其看起来像网格。它只是一个大的<ul>。

我用jQuery动画图片向下展开并显示整个图像（图像大小为185 x 380但在你悬停之前看到它被裁剪为185 x 185）但是当它展开时它会推动另一个{{1在一边，它变得一团糟。

如何在不推动任何周围元素的情况下展开我的<li>图像。

这是我的jquery代码

<li>

Answer 1

我会设置li元素的宽度和高度，当你在其中设置img的动画时，li元素保持不变。

#list li {
    width: 50px;
    height: 50px;
}

请参阅小提琴以获取完整示例： http://jsfiddle.net/rP4aU/