寻找一个 jQuery 效果来逐渐显示隐藏的 DIV/图像 [英] Looking for a jQuery effect to gradually reveal a hidden DIV/image

问题描述

可能是我遗漏了一些明显的东西，但我不知道如何慢慢地显示隐藏的图像/DIV，以便从上到下显示.

如果您查看这个 jsfiddle，您将看到我试图在 jQuery 中使用显示"来显示的图像:

It may be that I am missing something obvious, but I can't work out how to reveal a hidden image/DIV slowly, so that it is shown from top to bottom.

If you look at this jsfiddle you will see the image that I am trying to reveal using 'show' in jQuery:

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

The trouble with 'show' is that it grows the image from top left.

What I am looking for is an effect that hopefully is clear from these images:

i.e. the red 'home' image/DIV is gradually revealed from top to bottom so that it overlays the brown 'home' image.

Is it possible to achieve an effect like this with jQuery and if so what would be the best method? I am wanting to use this transition on all of the images in my nav bar.

Thanks,

Nick

ADDED CODE

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

解决方案

Put the hover image in a div that has this style class:

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

That makes the image invisible because its container (the div) is zero-height and its overflow (the whole image) is hidden.

Then animate div.blind like so:

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

Now the image's container is big enough for the whole hover image. The hover image is gradually revealed, from top to bottom.

I have this working at: http://jsfiddle.net/cHt8V/1/

这篇关于寻找一个 jQuery 效果来逐渐显示隐藏的 DIV/图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！