jQuery fadeTo（）函数与scrollTop（）

Question

I try to use fadeTo() in a scrollTop() function. First, I try it with fadeIn and fadeOut, that works perfect. But I want to keep the true height of the image. I changed the opacity in my css to 0 and want to show the image, when the scrollposition is between 30 and 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;
}

The if is working with fadeIn $ fadeOut, but not with fadeTo. Dont know why? Is fadeTo not supported with scrollTop?

Answer 1

I'm not sure why fadeTo isn't working, but you can try 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>

Also, make sure there is no other CSS on the element. Like visibility: hidden; or anything like that.