寻找 jQuery 效果来逐渐显示隐藏的 DIV/图像

可能我错过了一些明显的东西，但我无法弄清楚如何慢慢地显示隐藏的图像/DIV，以便它从上到下显示。

如果你看一下这个 jsfiddle，你会看到我试图在 jQuery 中使用“show”来显示的图像：

http://jsfiddle.net/nickharambee/Lj7z9/13/ http://jsfiddle.net/nickharambee/Lj7z9/13/

“show”的问题在于它从左上角开始增长图像。

我正在寻找的是希望从这些图像中可以清楚地看到的效果：

即红色“主页”图像/DIV 从上到下逐渐显示，从而覆盖棕色“主页”图像。

是否有可能用 jQuery 实现这样的效果，如果可以的话最好的方法是什么？我想在导航栏中的所有图像上使用此过渡。

Thanks,

Nick

添加代码

HTML:

<li id="test2"><img src="images/home3.png"></li>

CSS:

li {
    background: url('images/sprite.png') no-repeat;
    background-position: 0px 0px;
    height: 40px;
}

SCRIPT:

$("li#test2").hover(
      function () {
        $(this).animate({
          'background-position-y': '-40'
        }, 500);
      },
      function () {
        $(this).animate({
          'background-position-y': '0'
        }, 500);
      }
    );

将悬停图像放入具有以下样式类的 div 中：

.blind {
    height: 0px;
    overflow: hidden;
}

这使得图像不可见，因为它的容器（div）高度为零并且其溢出（整个图像）被隐藏。

然后像这样对 div.blind 进行动画处理：

$('.blind').animate({height: "40px"});

现在图像的容器足够大，可以容纳整个悬停图像。悬停图像从上到下逐渐显示。

我的工作地点是：http://jsfiddle.net/cHt8V/1/ http://jsfiddle.net/cHt8V/1/