寻找一个jQuery效果来逐步揭示隐藏的DIV /图像
可能是我遗漏了一些明显的东西，但我无法弄清楚如何慢慢地显示隐藏的图像/ DIV，以便从上到下显示它。
如果你看看这个jsfiddle，你会看到我试图用jQuery中的’show’来揭示的图像：
http://jsfiddle.net/nickharambee/Lj7z9/13/
‘show’的问题在于它从左上角开始增长图像。
我正在寻找的是从这些图像中可以清楚地看到的效果：
即红色的“家”图像/ DIV从上到下逐渐显露，以便覆盖棕色的“家”图像。
是否有可能用jQuery实现这样的效果，如果是这样，最好的方法是什么？ 我想在导航栏中的所有图像上使用此转换。
谢谢，
缺口
新增代码
HTML：
CSS：
li { background: url('images/sprite.png') no-repeat; background-position: 0px 0px; height: 40px; }
脚本：
$("li#test2").hover( function () { $(this).animate({ 'background-position-y': '-40' }, 500); }, function () { $(this).animate({ 'background-position-y': '0' }, 500); } );
将hover图像放在具有此样式类的div中：
.blind { height: 0px; overflow: hidden; }
这使得图像不可见，因为它的容器（div）是零高度并且其溢出（整个图像）被隐藏。
然后像这样动画div.blind：
$('.blind').animate({height: "40px"});
现在，图像的容器足以容纳整个hover图像。 悬浮图像从上到下逐渐显露出来。
我有这个工作： http ： //jsfiddle.net/cHt8V/1/
为了避免这些jquery动画方法闪烁，我会为“hover”外观的容器的高度设置动画，如下所示：
你可以通过在jQuery中使用slideDown('slow')来实现这一点。 您可以使用slow或fast或normal作为参数来控制速度。
更新了小提琴： http ： //jsfiddle.net/Lj7z9/14/
我只能想到两种方法来做到这一点，一种是创建一个动画图像（你不想要的）。 另一种方式是受到youlove.us旧主页的启发（他们使用了一个透明的白色png，背景中有“cut out”字样。这是在不断滚动的彩色背景上分层。）
你可以通过使用3个具有绝对定位和合适的z-index值的div来调整它，将它们放在另一个上面：底部有一个灰色背景，顶部是一个带有“home”字样的图像，所以灰色显示通过中间是你将动画的那个…创建一个红色背景的div并使用toggle（）动画它（如果你愿意，可以滑动和滑动）
我希望这是有道理的？