淡入淡出图像位置

Question

我有一个这样的列表：

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

每个图像的宽度为 950 像素，高度为 600 像素。

高度的前 300 像素是鼠标移出图像，最后 300 像素是我想要淡入淡出的鼠标悬停图像。这可能吗？

我有这个 CSS 来控制要显示的图像：

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

此代码只是将图像的最后 300 个像素向上移动，但我不想移动它，而是想让图像在“其他”上淡出不透明度：.

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

Answer 1

刚刚完成这个实施，感谢您提供了一个很好且相当简短的练习。

首先，请在此处查看最终结果。

实施说明：

1. 如果可能，请考虑更改标记。如果您将图像用作 background-image 而不是独立的 img 元素，那么这会容易得多（我什至可以说微不足道），并且它的性能也会更高。
2. 该解决方案的工作原理是为每个 img 元素添加一个“姐妹”div 并对其进行适当的样式设置。最重要的是设置其 background-image 属性，它允许我们只显示图片所需的一半。
3. 该解决方案需要动态计算源图像的大小，我使用 此处介绍的解决方案。

Answer 2

我想我已经有了主意。工作示例：

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

解决方案使用overflow风格并使用图层（z-index）。

当你用鼠标从下到上移动时，由于中心线错误，它应该稍微升级，但你应该明白这个想法。