jquery - 淡入淡出图像位置

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

刚刚完成此实现，感谢您提供了一个精彩且相当简短的练习。

<强> First off, see the end result here 。

实现说明:

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