Looking for a jQuery effect to gradually reveal a hidden DIV/image

Question

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

Answer 1

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/

Answer 2

To avoid these jquery animation method flickers I'd animate the height of a container of the "hover" look, like so:

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

Answer 3

you can achieve this by using slideDown('slow') in jQuery for animation. You can control speed by using slow or fast or normal as parameter.

updated the fiddle : http://jsfiddle.net/Lj7z9/14/

Answer 4

There are only 2 ways I can think of to do this, and one is creating an animated image (which you don't want). The other way is inspired by youlove.us's old homepage (they used a white png with transparency, with the words "cut out" from the background. This was layered over a coloured background that constantly scrolled.)

You could adapt this by using 3 divs with absolute positioning and suitable z-index values to place them on top of one another: the bottom has a grey background the top is an image with the word "home" cut out so the grey shows through the middle is the one that you will animate... create a div with red background and animate it using toggle() (or slideup & slidedown if you prefer)

I hope this makes sense?