jQuery动画图像

Question

我想在我的商店做同样的事情：http://www.templatemonster.com/demo/34477.html

请将鼠标悬停在任何包上。如您所见，粉红色背景的简短描述从底部滑动。

以下是我现在的位置：http://jsfiddle.net/THwuT/

前3个产品几乎拥有它，但底部的产品显示第一个产品的描述。之所以发生这种情况，是因为我给了他们一个绝对的位置，但如果没有这个，我不知道如何做到这一点。

Answer 1

以下是fiddle的新版本，修复了一些问题（我很抱歉我按下了更新而不是fork：$）。您遇到的问题是您没有将位置相对放置在.product容器上（每当您拥有位置相对的父级时，位置绝对将根据父级而不是页面对齐）。登记/> 另外我在.prod div下使用了mouseenter / mouseleave方法而不是旧方法，因为当你把鼠标放在desc上时它有一个奇怪的效果。我为动画删除了slideUp / down，因为停止会使该功能混乱。
为了产生该网站效果，您需要为产品容器添加一个高度，隐藏溢出并为msg的顶部设置动画而不是高度。这里有一个改变fiddle的小提琴。

Answer 2

尝试此代码jquery animate问题将清除

http://jsfiddle.net/THwuT/62/