I've seen some grow/shrink jQuery animations, how does one do this?

Question

I've seen some sites that use jQuery Animate to get their images to grow when moused over and shrink back to their original size when moused out. I'm trying to do this on some images but I can't quite get it right. The images are sized 60px by 60px. I went ahead and removed the flailing attempts code and have presented the initial code for assistance: 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;
}

elclanrs · Answer 1 · 2012-02-29T21:59:48.187

1

If I understand correctly you're taking about zooming in. Well, the concept behind this effect is to position: absolute the image in a position: relative, overflow: hidden and fixed width container. Then, on hover(), you animate the height and width of the image at the same time you animate its left and top properties by negative half of the position values.

edited Feb 29 '12 at 21:59

answered Feb 29 '12 at 21:54

elclanrs

92,861
21
134
171

Hmm, you got me on the right track, but I might have miss-phrased what I was wanting, so I edited my initial post. I'm trying to make the object when mouse over grow larger (maybe from 50px to 60px) over maybe a second or so; then when the mouse leaves hover (mouse out?) the object would go back to it's initial size. I think this would still want a relatively positioned, fixed width container, what does the overflow have to do? And can you point me towards some resources on writing the hover() properly (for an image 60x60)? – beta208 Mar 01 '12 at 00:24

mindandmedia · Answer 2 · 2012-03-01T00:46:34.700

0

here, i created a fiddle for you, to help you get started: http://jsfiddle.net/5twM6/4/

here is the documentation: http://api.jquery.com/animate/

edit: close to full solution

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));
});

I haven't tested it though, but it should help you progress...

edited Mar 01 '12 at 00:46

answered Feb 29 '12 at 21:58

mindandmedia

6,800
1
24
33

That does help a bit, my objects are 60px by 60px. I'm hoping to make them grow a bit when moused over. I think making them 50px by 50px increase to 60px by 60px would be great. – beta208 Mar 01 '12 at 00:17
just do `$(this).animate({"width" : "-=10", "height":"-=10"}, 1000, function(){ $(this).animate({"width" : "+=10", "height":"+=10"}, 1000));` – mindandmedia Mar 01 '12 at 00:21
Then how do I make it go back to the initial size when moused out? – beta208 Mar 01 '12 at 00:41

Damon Warren · Accepted Answer · 2012-02-29T23:04:49.637

Obviously you will want to adjust all the height, width, top and left values, but this should do what you are looking for...

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

Also when doing relative and absolute positioning, I find it useful to add an outline to all the container elements until it's all positioned correctly... `outline: 1px solid orange;` this works better than border because outline doesn't affect the actual width and or height of an element, and border does. — Damon Warren, Feb 29 '12 at 23:19
Thanks, I had been using border for the longest time and adjusting the width back and forth!! — beta208, Mar 01 '12 at 00:16

I've seen some grow/shrink jQuery animations, how does one do this?

3 Answers3