Question

我有一个小动画，可以在悬停时增加缩略图的大小，但会影响其余图像的位置。

问题是当你将鼠标悬停在img上时，其他img向下移动，并且正确地适应动画所占用的空间。我想让其他图像不动，就像动画一样。

$ num和for循环从MySQL表中提取图像，忽略

<html>
<?php
for($i; $i < $num; $i++){
echo "<img class='img' id='img" . $i . "' />";
}
?>

<script>
$('.img').hover(
        function(){
            $(this).animate({
                width: "+=14",
                height: "+=14",
                left: "-7",
                bottom: "-7"
            });
        }, function(){
            $(this).animate({
                width: "-=14",
                height: "-=14",
                left: "0",
                bottom: "0"
            });
        }
    );
</script>
<css>
.img{
    padding: 10px;
    position: relative;
    cursor: pointer;
}
</html

Answer 1

如果你有至少足够的填充来调整填充，SpaceDog的答案非常有效，但是在没有填充的情况下，这个解决方案可能会更好：

$(function( ){
    $(window).ready(function( ){
        $('.img').each(function( ){
            $(this).css({'top': $(this).offset( ).top, 'left': $(this).offset( ).left});
        });
        $('.img').css({'position': 'absolute', 'z-index': 1});
    });

    $('.img').hover(
        function(){
            $(this).css('z-index', 10);
            $(this).animate({
                width: "+=14",
                height: "+=14",
                left: "-=7",
                top: "+=7"
            });
        }, function(){
            $(this).css('z-index', 1);
            $(this).animate({
                width: "-=14",
                height: "-=14",
                left: "+=7",
                top: "-=7"
            });
        }
    );
});

这是JSFiddle

基本上，它循环遍历每个图像并根据自己的位置设置其顶部和左侧位置，然后将图像的位置设置为绝对位置，以便它不会干扰周围的任何元素。因此，它需要静态定位的图像，并使它们绝对，而不会影响它们的位置。然后它几乎完全按照你原来的意图动画图像。

同样，如果你正在使用足够的填充，SpaceDog的答案也会有效。

Answer 2

你可以通过调整动画中的填充而不是左/下位置来实现你想要的（我认为），如下所示：

$('.img').hover(
        function(){
            $(this).animate({
                width: "+=14",
                height: "+=14",
                padding: "-=7"
            });
        }, function(){
            $(this).animate({
                width: "-=14",
                height: "-=14",
                padding: "+=7"
            });
        }
    );

这是demo。

影响位置的jquery动画

2 个答案: