javascript - JQuery fadeTo() 函数与 scrollTop()

Question

我尝试在 scrollTop() 函数中使用 fadeTo()。首先，我尝试使用 fadeIn 和 fadeOut，效果非常好。但我想保持图像的真实高度。当滚动位置在 30 到 200 之间时，我将我的 css 中的不透明度更改为 0 并想要显示图像。

    <script type="text/javascript">
        $(document).scroll(function () {
            if ($(this).scrollTop() > 30 && $(this).scrollTop() < 200) {
                $("#amy").fadeTo("slow", 1);
            } else {
                $("#amy").fadeTo("slow", 0);
            }
        });
    </script>

CSS:

#amy {
    padding-top: 20px;
    margin-bottom: -50px;
    max-width: 155px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

if 使用 fadeIn $ fadeOut，但不使用 fadeTo。不知道为什么？ scrollTop 不支持 fadeTo 吗？

Answer 1

我不确定为什么 fadeTo 不起作用，但您可以尝试 animate()

<script type="text/javascript">
    $(document).scroll(function () {
        if ($(this).scrollTop() > 30 && $(this).scrollTop() < 200) {
            $("#amy").animate({opacity: 1}, "slow");
            return;
        } 
        $("#amy").animate({opacity: 0}, "slow");

    });
</script>

此外，请确保该元素上没有其他 CSS。像 visibility: hidden; 或类似的东西。