Question

Ok, I have a structure like this:

<div class="image">
   <img src="img1.jpg" alt="" />
</div>

<div class="image">
   <img src="img1.jpg" alt="" />
</div>

<div class="image">
   <img src="img1.jpg" alt="" />
</div>

and CSS like this:

.image{
    height:100px;
    overflow: hidden;
}

SO basically, only the top 100px of the image shows. When the user hovers over the image, I want to scroll the image to the bottom 100px. i.e., it animates from showing the top 100px to the bottom 100px.

Now if all the images were the same height, it would be easy. I could do this, for a 500px high image:

$('.image img').hover(
    function(){
     $(this).stop().animate({marginTop:'-400px',}, 1000);
    },
    function(){
     $(this).stop().animate({marginTop:'0px',}, 1000);
    }
   );

Problem is, the three images are of different heights. And as far as I know, there really isn’t any reliable method to get image height cross-browser. Sp any idea how I can solve this?

Any help is much appreciated.

Answer 1

Have you tried using jQuery’s height() method to get the height of the image? There’s likely cross-browser compatibility fixes built in.

$('.image img').hover(
  var $th = $(this);
  var height = $th.height();
  function(){
   $th.stop().animate({marginTop:-(height - 100)}, 1000);
  },
  function(){
   $th.stop().animate({marginTop:'0px'}, 1000);
  }
);