Question

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

如果你看看这个jsfiddle，你会看到我试图用jQuery中的'show'来揭示的图像：

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

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

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

enter image description here

即。红色的“家”图像/ 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;
}

SCRIPT：

$("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来调整它，使它们彼此重叠：底部有灰色背景顶部是一个带有“home”字样的图像，所以灰色显示出来中间是你将动画的那个...创建一个红色背景的div并使用toggle（）（如果你愿意，可以滑动和滑动）来动画它

我希望这有道理吗？

寻找一个jQuery效果来逐步揭示隐藏的DIV /图像

4 个答案: