title: jQuery slide up the image?
body: <p>Ok, I have a structure like this:</p>
  
  <pre><code>&lt;div class="image"&gt;
     &lt;img src="img1.jpg" alt="" /&gt;
  &lt;/div&gt;
  
  &lt;div class="image"&gt;
     &lt;img src="img1.jpg" alt="" /&gt;
  &lt;/div&gt;
  
  &lt;div class="image"&gt;
     &lt;img src="img1.jpg" alt="" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS like this:</p>
  
  <pre><code>.image{
      height:100px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Now if all the images were the same height, it would be easy. I could do this, for a 500px high image:</p>
  
  <pre><code>$('.image img').hover(
      function(){
       $(this).stop().animate({marginTop:'-400px',}, 1000);
      },
      function(){
       $(this).stop().animate({marginTop:'0px',}, 1000);
      }
     );
  </code></pre>
  
  <p>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?</p>
  
  <p>Any help is much appreciated.</p>