1

画像を含む div と、周囲にいくつかの他の div があります。今、画像を少しアニメーション化していますが、その下のコンテンツがずれています。それを修正する方法はありますか？

ここに私がやったことのデモがあります。下のdivに影響を与えずにモバイル画像をズームしたい。

その効果のために私が使用しているjavascriptは次のとおりです:-

<script>
$(document).ready(function() {
    $('.itemDisplay').mouseenter(function(e) {
        $(this).find('.itemimgWrap').children('img').animate({ height: '135', left: '-20', top: '-20'}, 100);
    }).mouseleave(function(e) {
        $(this).find('.itemimgWrap').children('img').animate({ height: '120', left: '0', top: '0'}, 100);
    });
});
</script>
4

2 に答える 2

1

画像コンテナーを 120px に設定する必要がありoverflow:hiddenます。画像がテキストの上に重ならないようにしたい場合は ;)

.itemimgWrap{
   overflow: hidden;
   height: 120px;
}

また、CSS3 を使用してアニメーションを実行できます (ただし、Jquery をお勧めします)。

.itemimgWrap img {
    transform: scale(1);
    transition-timing-function: ease-out;
    transition-duration: 500ms;
}
.itemimgWrap img:hover{
    transform: scale(1.5);
    transition-timing-function: ease-out;
    transition-duration: 500ms;
}
于 2012-11-13T23:01:08.097 に答える
0

画像を含むdivの高さを設定するとうまくいきました

  .itemimgWrap{
    height: 120px!important;
   }
于 2012-11-13T22:45:23.913 に答える