Fade image position

I have a list like this:

<ul>
    <li><a href="#"><img src="/userfiles/test.png" alt="" /></a></li>
    <li><a href="#"><img src="/userfiles/test2.png" alt="" /></a></li>
</ul>

Each of these image is 950 pixels wide and 600 pixels in height.

The first 300 pixel in height is the mouse-out image and the last 300 pixel is the mouse-over image I want to fade over. Is this possible?

I have this CSS to control what image to show:

ul { list-style: none; padding: 0; margin: 0; }
ul li { width: 950px; height: 300px; overflow: hidden; position: relative; }
ul li img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

This code just moves the last 300 pixels of the image up, but instead of moving it I want to opacity fade the image over the "other":.

<script type="text/javascript">
        $(document).ready(function () {
            $("ul li img").mouseover(function () {
                $(this).stop().animate(
                    { top: "-300px" },
                    { duration: 300 })
            }开发者_JAVA百科)
            .mouseout(function () {
                $(this).stop().animate(
                    { top: "0" },
                    { duration: 300 })
            })
        });
    </script>

Just finished implementing this, thanks for presenting a nice and reasonably short excercise.

First off, see the end result here.

Implementation notes:

1. Consider changing your markup if possible. This would have been so much easier (I would go so far as to say trivial) if you used the image as a background-image rather than a standalone img element, and it would also be more performant.
2. The solution works by adding a "sister" div for each img element and styling it appropriately. The most important is setting its background-image property, which allows us to show only the desired half of the picture.
3. The solution requires dynamically calculating the size of the source image, which I did using the solution presented here.

I think I've got the idea. The working example:

http://jsfiddle.net/avall/RMWt8/1/

The solution uses overflow style and play with layers (z-index).

It should be slightly upgraded because of center line bug when you go with your mouse from bottom to top but you should get the idea.