2

私はeコマースWebサイトで作業していますが、クライアントは商品画像をカテゴリページにカーソルを合わせて展開できるようにしたいと考えています。

商品画像は<li>aの内側に整理され<ul>ており、グリッドのように見えるように各行に4つになるように設定しています。しかし、そのすべてはただ1つの大きな<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 に答える