jQuery fadeTo（）函數與scrollTop（）

Question

我嘗試在scrollTop（）函數中使用fadeTo（）。 首先，我嘗試使用fadeIn和fadeOut進行測試，效果很好。 但是我想保持圖像的真實高度。 我將css中的不透明度更改為0，並希望在滾動位置在30到200之間時顯示圖像。

    <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;一樣visibility: hidden; 或類似的東西。