我看过一些增长/缩小 jQuery 动画，如何做到这一点？答案

【问题标题】：I've seen some grow/shrink jQuery animations, how does one do this?我看过一些增长/缩小 jQuery 动画，如何做到这一点？
【发布时间】：2012-03-19 09:59:13
【问题描述】：

我见过一些网站使用 jQuery Animate 来让他们的图像在鼠标悬停时放大并在鼠标移开时缩小到原来的大小。我正在尝试在某些图像上执行此操作，但我无法完全正确。图像大小为 60 像素 x 60 像素。我继续并删除了甩尾尝试代码，并提供了初始代码以寻求帮助： HTML：

<div id="icons">
    <ul>
        <li><a href="services.php"><img src="img/asdf.jpg" alt="" /></a></li>
        <li><a href="services.php"><img src="img/wasd.jpg" alt="" /></a></li>
        <li><a href="services.php"><img src="img/dsdf.jpg" alt="" /></a></li>
        <li><a href="services.php"><img src="img/wafds.jpg" alt="" /></a></li>
    </ul>
</div>

CSS：

#icons {
margin: 0 auto;
padding-top: 20px;
width: 560px;
}

#icons ul li {
display: inline;
list-style-type: none;
padding-right: 65px;
}

【问题讨论】：

标签： jquery jquery-animate shrink

【解决方案1】：

如果我理解正确，您正在考虑放大。嗯，这个效果背后的概念是position: absoluteposition: relative、overflow: hidden 中的图像并固定width容器。然后，在hover() 上，为图像的height 和width 设置动画，同时通过位置值的负一半 为其left 和top 属性设置动画。

【讨论】：

嗯，你让我走上了正轨，但我可能用错了措辞，所以我编辑了我最初的帖子。当鼠标悬停在大约一秒钟左右时，我正在尝试使对象变大（可能从 50px 到 60px）；然后当鼠标离开悬停（鼠标退出？）时，对象会回到它的初始大小。我认为这仍然需要一个相对定位，固定宽度的容器，溢出必须做什么？您能否指出一些关于正确编写 hover() 的资源（对于 60x60 的图像）？

【解决方案2】：

显然您会想要调整所有的高度、宽度、顶部和左侧值，但这应该可以满足您的需求...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Grow Shrink Demo</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <style>
            #icons {
                margin: 0 auto;
                padding-top: 20px;
                width: 560px;
            }

            #icons ul {
                display: block;
                height: 45px;
                width: 560px;
                overflow: hidden;
                position: relative;
            }

            #icons ul li {
                display: inline-block;
                list-style-type: none;
                width: 40px;
                height: 40px;
                overflow: hidden;
                position: absolute;
                top: 0px;
            }

            #icons img {
                height: 20px;
                width: 20px;
                position: relative;
                top: 10px;
                left: 10px;
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#icons img').hover(function(){
                    //handle mouse over
                    $(this).stop();

                    $(this).animate({
                        width: '26px',
                        height: '26px',
                        top: '7px',
                        left: '7px'
                    }, 200);
                }, function(){
                    //handle mouse out
                    $(this).stop();

                    $(this).animate({
                        width: '20px',
                        height: '20px',
                        top: '10px',
                        left: '10px'
                    }, 200);
                });
            });
        </script>
    </head>
    <body>

        <div id="icons">
            <ul>
                <li style="left: 20px;"><a href="services.php"><img src="/images/asdf.jpg" alt="" /></a></li>
                <li style="left: 80px;"><a href="services.php"><img src="img/wasd.jpg" alt="" /></a></li>
                <li style="left: 140px;"><a href="services.php"><img src="img/dsdf.jpg" alt="" /></a></li>
                <li style="left: 200px;"><a href="services.php"><img src="img/wafds.jpg" alt="" /></a></li>
            </ul>
        </div>

    </body>
</html>

【讨论】：

另外，在进行相对和绝对定位时，我发现为所有容器元素添加轮廓直到它们都正确定位很有用...outline: 1px solid orange; 这比边框效果更好，因为轮廓没有影响元素的实际宽度和/或高度，而边框确实如此。
谢谢，我用边框用的时间最长，来回调整宽度！！

【解决方案3】：

在这里，我为您创建了一个小提琴，以帮助您入门：http://jsfiddle.net/5twM6/4/

这里是文档：http://api.jquery.com/animate/

编辑：接近完整的解决方案

function grow(elem)
{
   elem.animate({"width" : "+=10", "height":"+=10"}, 1000);
}
function shrink(elem)
{
   elem.animate({"width" : "-=10", "height":"-=10"}, 1000);
}
$('.icons ul li img').mouseenter(function(){
   grow($(this));
}).mouseleave(function(){
   shrink($(this));
});

虽然我还没有测试过，但它应该可以帮助你进步......

【讨论】：

这确实有点帮助，我的对象是 60 像素 x 60 像素。我希望在鼠标悬停时让它们长大一点。我认为将它们从 50 像素 x 50 像素增加到 60 像素 x 60 像素会很棒。
只做$(this).animate({"width" : "-=10", "height":"-=10"}, 1000, function(){ $(this).animate({"width" : "+=10", "height":"+=10"}, 1000));
那么鼠标移出时如何让它恢复到初始大小？