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

Question

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

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

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

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

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

<图片src="https://i.sstatic.net/pN1ss.png" alt="在此处输入图像描述">

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

是否有可能用 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/

Answer 2

为了避免这些 jquery 动画方法闪烁，我将对“悬停”外观的容器的高度进行动画处理，如下所示：

http://jsfiddle.net/Lj7z9/16/

Answer 3

您可以通过在 jQuery 中使用 slideDown('slow') 动画来实现此目的。
您可以使用slow或fast或normal作为参数来控制速度。

更新了小提琴：http://jsfiddle.net/Lj7z9/14/

Answer 4

我只能想到两种方法来做到这一点，一种是创建动画图像（您不想要）。
另一种方式的灵感来自 youlove.us 的旧主页（他们使用具有透明度的白色 png，并从背景中“剪出”字样。这是分层在不断滚动的彩色背景上的。）

您可以通过使用 3 来适应这一点具有绝对定位和合适的 z-index 值的 div 可以将它们放在另一个之上：
底部有灰色背景
顶部是一张图像，其中“家”一词被剪掉，因此灰色显示出来
中间是您要设置动画的...创建一个具有红色背景的div，并使用toggle()（或者如果您愿意的话可以向上滑动和向下滑动）对其进行动画设置

我希望这有意义吗？