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.
});

Answer 2

以下是工作片段：

var $window = $(window);
var $logopiano = $('#logopiano');

function showHideLogo() {
   if( $window.scrollTop() > 910 ) {
        $logopiano.fadeIn("slow", function() {
        });
   } else {
        $logopiano.fadeOut("slow", function() {
        });
   }
}

showHideLogo();
$window.scroll(showHideLogo);

Answer 3

试试这段代码。你在fadeOut和fadeIn函数之间混淆。切换它们，代码完美无缺。

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

fadein / out slow没有“慢”效果

3 个答案: