Question

我见过一些使用jQuery Animate的网站让他们的图像在鼠标移动时生长，并在被挖出时缩小回原始大小。我试图在一些图像上这样做，但我不能完全正确。图像尺寸为60px×60px。我继续并删除了flailing尝试代码并提供了初始代码以获得帮助： 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;
}

Answer 1

如果我理解正确你正在进行缩放。嗯，这种效果背后的概念是position: absolute position: relative中的图像，{{1}并修复了overflow: hidden个容器。然后，在width上，通过否定动画显示hover()和height属性的同时动画图像的width和left一半的位置值。

Answer 2

在这里，我为你创造了一个小提琴，帮助你开始：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));
});

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

Answer 3

显然你会想要调整所有的高度，宽度，顶部和左边的值，但这应该是你想要的...

<!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>

我已经看到一些增长/缩小jQuery动画，怎么做到这一点？

3 个答案: