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

Question

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

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

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

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

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

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

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

谢谢

尼克

添加代码

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

脚本:

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

Answer 1

将悬停图像放入具有此样式类的 div 中:

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

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

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

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

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

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