10

Is there a way, using Jquery to grow and then shrink an image (with animation so it looks smooth) on hovering without affecting the layout too much (I'm assuming the padding would have to shrink and then grow as well).

With a bit of messing around, I finally came up with the solution, thanks to everyone who helped out.

<html>
<head>
<style type="text/css"> 
    .growImage {position:relative;width:80%;left:15px;top:15px}
    .growDiv { left: 100px; top: 100px;width:150px;height:150px;position:relative }
</style>

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

</head>
<body> 
<div class="growDiv"> 
      <img class="growImage" src="image.jpg" alt="my image"> 
</div>

<script type="text/javascript">

$(document).ready(function(){

    $('.growImage').mouseover(function(){
      //moving the div left a bit is completely optional
      //but should have the effect of growing the image from the middle.
      $(this).stop().animate({"width": "100%","left":"0px","top":"0px"}, 400,'swing');
    }).mouseout(function(){ 
      $(this).stop().animate({"width": "80%","left":"15px","top":"15px"}, 200,'swing');
    });;
});
</script>
</body></html>
Kris Erickson
  • 33,454
  • 26
  • 120
  • 175

7 Answers7

17

If you have your image positioned absolutely to the document in CSS, the rest of the page layout should not change when you animate your image.

You should be able to use jQuery's animate() function. The code would look something like this:

$("#yourImage").hover(
    function(){$(this).animate({width: "400px", height:"400px"}, 1000);},        
    function(){$(this).animate({width: "200px", height:"200px"}, 1000);}
);

This example would grow the image with id=yourImage to 400px wide and tall when moused over, and bring it back to 200px wide and tall when the hover ends. That said, your issue lies more in HTML/CSS than it does jQuery.

David Ogutu
  • 13
  • 4
Steve Goodman
  • 1,196
  • 10
  • 22
9

The grow and shrink operations are easy with .animate:

$("#imgId").click(function(){
  $(this).animate({ 
    width: newWidth,
    height: newHeight
  }, 3000 );
});

The problem is how to do this without changing the layout of your page. One way to do this is with a copy that is positioned absolutely over the content. Another might be to absolutely position the image inside a relative fixed size div - though IE might have problems with that.

Here is an existing library that seems to do what you're asking http://justinfarmer.com/?p=14

Keith
  • 150,284
  • 78
  • 298
  • 434
4

You could wrap the image in a div (or whatever html element you think is appropriate, li etc) with it's overflow set to hidden. Then use jQuery .animate to grow that div, in whatever way you like.

So for example the html could be

<div class="grower">
  <img src="myimg.jpg" width="300" height="300" alt="my image">
</div>

Then your css would look like

.grower {width:250px;height:250px;overflow:hidden;position:relative;}

So your image is essentially cropped by the div, which you can then grow on any event to reveal the full size of the image using jQuery

$('.grower').mouseover(function(){
  //moving the div left a bit is completely optional
  //but should have the effect of growing the image from the middle.
  $(this).stop().animate({"width": "300px","left":"-25px"}, 200,'easeInQuint');
}).mouseout(function(){ 
  $(this).stop().animate({"width": "250px","left":"0px"}, 200,'easeInQuint');
});;

NB: You may want to add in additional css into your js, like an increased z-index to your div so that it can grow over the layout etc

Ralph Cowling
  • 2,839
  • 1
  • 20
  • 10
3

Wanted to post a simple solution I'm using based on this post and information from Fox's answer to a related question.

Using an <img> like this: <img style="position: absolute;" class="resize" />

You can do something similar to what's below. It will take the image's current width+height, make it 3 times bigger on hover (current * 3) and then bring it back on mouse out.

var current_h = null;
var current_w = null;

$('.resize').hover(
    function(){
        current_h = $(this, 'img')[0].height;
        current_w = $(this, 'img')[0].width;
        $(this).animate({width: (current_w * 3), height: (current_h * 3)}, 300);
    },
    function(){
        $(this).animate({width: current_w + 'px', height: current_h + 'px'}, 300);
    }
);

The current_X variables are global so they will be accessible in the mouse-out action.

Community
  • 1
  • 1
drewjoh
  • 1,786
  • 1
  • 14
  • 22
  • While this is only a simple method. If the user moves the mouse quickly back and forward over the image, the image will keep expanding. You will need to reset the dimensions completely on `mouseout`. – Navigatron Oct 30 '12 at 15:42
1

-- HTML

<div class="container">
  <img id="yourImg" src="myimg.jpg">
</div>

-- JS

$( ".container" ).toggle({ effect: "scale", persent: 80 });

--More info
http://api.jqueryui.com/scale-effect/

Pinny
  • 206
  • 2
  • 10
1

Can't you use jQuery's animate to implement that? With a bit of tinkering, it should be a snap.

karim79
  • 339,989
  • 67
  • 413
  • 406
1

If you really mean "without affecting the layout", you need to concentrate more on the CSS than on the javascript.

The javascript involoved has already bean posted here... but to make sure that your layout is not spoiled, you will need to remove your image from the layout's flow.

This can be done by positioning it absolutely, and setting its z-index to a larger value. However, this is not always the cleanest solution... so I would recommend you play around with "position:relative" in the parent DOM element, and "position:absolute" in the image's style.

The interplay of relative and absolute is quite interesting. You should google it up.

cheers, jrh

jrharshath
  • 25,975
  • 33
  • 97
  • 127