Javascript jquery动画制作影响posistion_Javascript_Jquery_Css_Animation

Javascript jquery动画制作影响posistion

javascript jquery css animation

Javascript jquery动画制作影响posistion,javascript,jquery,css,animation,Javascript,Jquery,Css,Animation,我有一个小的动画，它增加了悬停时我的缩略图的大小，但会影响其余图像的位置问题是，当您将鼠标悬停在一个img上时，另一个img会向下移动，并向右移动以适应动画占用的空间。我希望其他图像在动画中不移动 $num和for循环正在从MySQL表中提取图像，忽略 <html> <?php for($i; $i < $num; $i++){ echo "<img class='img' id='img" . $i . "' />"; } ?> <scrip

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

问题是，当您将鼠标悬停在一个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


通过调整动画中的填充而不是左/下位置，可以让它做（我认为）您想做的事情，如下所示：
$('.img').hover(
        function(){
            $(this).animate({
                width: "+=14",
                height: "+=14",
                padding: "-=7"
            });
        }, function(){
            $(this).animate({
                width: "-=14",
                height: "-=14",
                padding: "+=7"
            });
        }
    );

这里有一个。
如果您至少有足够的填充来调整填充，那么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"
            });
        }
    );
});

这里有一个
基本上，它循环遍历每个图像，并根据其自身的位置设置其顶部和左侧位置，然后将图像的位置设置为绝对位置，这样它就不会干扰周围的任何元素。因此，它采用静态定位的图像，使它们成为绝对的，而不影响它们的位置。然后，它几乎完全按照您最初的意图为图像设置动画
同样，如果你使用足够的填充物，SpaceDog的答案也会起作用。
你会得到+1，只为小猫图片。：）这是一个巧妙的技巧，可以根据图片的绘制位置来确定图片的绝对位置，但是如果你调整窗口的大小，它会改变页面的行为，因为它们现在处于绝对位置。只是一个小音符。我注意到他有足够的填充物，只是选择了简单的选项——谢谢你提供了一个更有用的通用答案。哈哈，我很高兴你喜欢小猫和这个把戏！事实上，我甚至没有想过要给填充物设置动画。你的解决方案绝对简短而甜蜜。更重要的是，它完成了任务！我没有考虑过调整窗口大小，所以这是一个很好的观点。我提出了一个解决方案，其中考虑了这一点：。