jQuery slide up the image?
<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>
