jQuery滑动图像？

Question

好的，我有这样的结构：

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

和CSS这样的：

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

因此，基本上，仅图像显示的顶部100像素。当用户悬停在图像上时，我想将图像滚动到底部100px。即从显示最高100px到最低100px的动画。

现在，如果所有的图像都是相同的高度，那很容易。我可以做到这一点，为500px高的图像：

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

问题是，这三个图像是不同的高度。据我所知，实际上没有任何可靠的方法来获得图像高度跨浏览器。想知道如何解决这个问题？

任何帮助，非常感谢。

Answer 1

您是否尝试过使用jQuery的height()方法来获取图片的高度？有可能内置的跨浏览器兼容性修补程序。

$('.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); 
    } 
);