javascript - fadein/out slow 没有 "slow"效果

Question

下面的代码应该淡入淡出。我究竟做错了什么？

$(window).scroll(function(){
    if ($(window).scrollTop() > 910){
        $('#logopiano').stop(true, true).fadeIn("slow", function() {
            $(this).show().css({ visibility: "visible" });
        });
    } else {
        $('#logopiano').stop(true, true).fadeOut("slow", function() {
            $(this).show().css({ visibility: "hidden" });
        });
    }
});

这是页面:http://ffio.it/index.html

Answer 1

这个问题是因为 scroll 事件每滚动一个像素就会触发一次。这意味着 fade 开始，但在下一个像素停止并立即显示最终结果。要停止这种情况，您可以在滚动停止后几秒钟运行您的代码，方法是使用 setTimeout。试试这个:

var timer;

$(window).scroll(function(){
    clearTimeout(timer);
    var timer = setTimeout(function() {
        var $logopiano = $('#logopiano').stop(true, true);
        if ($(window).scrollTop() > 910) {
            $logopiano.fadeIn("slow", function() {
                $(this).show().css({ visibility: "visible" });
            });
        } else {
            $logopiano.fadeOut("slow", function() {
                $(this).show().css({ visibility: "hidden" });
            });
        }
    }, 100); // execute 100ms after scrolling stops. Amend as needed.
});