jquery - 鼠标悬停在带有附加信息的 div 上滑动 - 如何？

Question

关于 http://snapguide.com当您将鼠标悬停在图像上时，会向上滑动一个包含更多内容的附加 div。

我在想，有没有什么简单的方法可以实现这种效果……或者甚至有任何人都知道的 jQuery 插件或操作指南？我试图查看该网站的源代码，但我无法理解到底是什么触发了该效果。

我试着在谷歌上搜索，但不知道这个效果到底叫什么，所以我有点迷路了。感谢您的帮助:)

Answer 1

你可以尝试这样的代码:

$(el).css({position: 'relative'})

$(el).hover(function(){
    $(this).animate({position: 'relative', top: '-20px'}, 1000)
}, function(){
    $(this).animate({position: '', top: ''}, 1000)
})

看看这个 fiddle查看渲染。