2

我在一个电子商务网站上工作，我的客户希望产品图像可以在类别页面上悬停时展开。

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

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

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

这是我的jQuery代码

<script type="text/javascript">
  $(document).ready(function(){
    $(".item").hover(function() {
      $(this).find('.image').stop().animate({height: "380px"}, 'slow');
      $(this).find('.product-info').fadeIn();
    },
    function() {
      $(this).find('.image').stop().animate({height: "185px"}, 'slow');
      $(this).find('.product-info').fadeOut();
    });
  });
</script>
4

1 回答 1

0

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

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

有关完整示例，请参见小提琴：http: //jsfiddle.net/rP4aU/

于 2012-12-05T05:58:55.967 回答