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 的动画。

现在，如果所有图像的高度都相同，那就很容易了。对于 500 像素高的图像，我可以这样做：

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

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

非常感谢任何帮助。

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