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/