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); 
    } 
);