javascript - 图片展开用jQuery动画推别人

Question

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

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

我用 jQuery 为图片制作动画以向下展开并显示整个图像(图像的大小为 185 x 380，但在悬停之前你会看到它被裁剪为 185 x 185)但是当它展开时它会插入另一个 <li> s 到一边，它变得一团糟。

我怎样才能拥有我的<li> s 图像在不插入任何周围元素的情况下展开。

这是我的 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>

Answer 1

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

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

完整示例请参见 fiddle : http://jsfiddle.net/rP4aU/