jquery - jQuery函数在window.scroll事件上淡化图像不起作用

Question

这应该很简单，但我就是不知道为什么它不起作用。

如果滚动顶部在某个区域内，则淡出图像。如果使用鼠标滚动或使用键盘箭头键，这将有效。但是当您使用鼠标拖动滚动条时，该函数被调用 - 我可以在日志中看到这一点 - 但 jQuery fadeTo 不能立即工作。如果我停止滚动，大约 5 秒后图像会消失。

$(window).scroll(function(){
    var scrollYpos = $(document).scrollTop();

    if(scrollYpos > 100 && scrollYpos < 200){               
        fade_out_img();
    }
    else{
        fade_in_img();
    }
});

function fade_out_img(){
    $("#image").stop().fadeTo('slow', 0.1);
}
function fade_in_img(){
    $("#image").fadeTo('slow', 1.0);
}

提前感谢您的帮助。

Answer 1

Working jsFiddle Demo

您错过stop()了功能的方法fade_in_img。

HTML

<div id="image"></div>
<div id="scroll"></div>

CSS

#image {
    width: 200px;
    height: 1000px;
    background: red;
}

#scroll {
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
    height: 300px;
    overflow: auto;
    background: yellow;
}

JavaScript（由 jQuery 编写）

$(function () {
    $(window).scroll(function(){
        var scrollYpos = $(document).scrollTop();

        // for debugging
        $('<div>').text(scrollYpos).prependTo('#scroll');

        if(scrollYpos > 100 && scrollYpos < 200){               
            fade_out_img();
        }
        else{
            fade_in_img();
        }
    });

    function fade_out_img(){
        $("#image").stop().fadeTo('slow', 0.1);
    }

    function fade_in_img(){
        $("#image").stop().fadeTo('slow', 1.0);
    }
});

不要忘记查看jsFiddle 演示。