FadeIn 和 fadeOut 在 window 滚动后发生多次

Question

如果不是 window scrollTop 和 backwards，我正在尝试更改徽标图像 src，并使用淡入淡出效果，但即使滚动一次，淡入淡出也会发生多次。

我通过 console.log 了解到，即使您滚动一次（鼠标滚轮或箭头），它也会记录多次消息（例如 8,10 或 15 次）。这意味着在将 src 更改为其他图像之前，徽标总是闪烁 10 次以上。

jQuery:

$(window).scroll(function () {
    if ($(window).scrollTop()) {
        $.when($('#navbar').css('padding', '0px')).done(function () {
            $('.logo img').fadeOut(400, function () {
                $('.logo img').attr('src', 'images/small-logo.png');
                console.log('bot');
            }).fadeIn();
        });
    } else {
        $.when($('#navbar').css('padding', '20px 0px')).done(function () {
            $('.logo img').fadeOut(400, function () {
                $('.logo img').attr('src', 'images/top-logo.png');
                console.log('top');
            }).fadeIn();
        });
    }
});

HTML:

<div class="col-lg-12">
   <div class="col-lg-3 logo no-padding-left">
      <a href="index.php">
        <img src="images/logo.png"/>
      </a>
   </div>
   <div class="col-lg-9 no-padding-right">
      <div class="navbar-header">
        <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
               .
               .
               .
           </ul>
        </div>
     </div>
   </div>
</div>

我已经找到并尝试了很多解决方案（例如 .stop()、动画等），但似乎对我没有任何效果，我也不知道为什么。

提前致谢。

Answer 1

如果您在开始像这样设置动画之前构建一个短暂的延迟以允许更多滚动事件进入，会怎样？

var animationTimeout;
var isAtTop = true;
$(window).scroll(function () {
      if ($(window).scrollTop()) {
         $.when($('#navbar').css('padding', '0px')).done(function () {
            if (isAtTop) {
                if (animationTimeout) clearTimeout(animationTimeout);

                animationTimeout = setTimeout(function() {
                    $('.logo img').fadeOut(400, function () {
                        $('.logo img').attr('src', 'images/small-logo.png');
                        console.log('bot');
                    }).fadeIn();
                }
                , 100);
             });
             isAtTop = false;
         }
     } else {
        $.when($('#navbar').css('padding', '20px 0px')).done(function () {
            if (!isAtTop) {
                if (animationTimeout) clearTimeout(animationTimeout);

                animationTimeout = setTimeout(function() {
                    $('.logo img').fadeOut(400, function () {
                         $('.logo img').attr('src', 'images/top-logo.png');
                         console.log('top');
                    }).fadeIn();
                },
                100);
            });
            isAtTop = true;
        }
     }

Answer 2

可以使用检查页面是否滚动到顶部的标志来解决问题。

您只需要像这样更改您的 JS 代码：

$isScrolledToTop = false;

$(window).scroll(function () {
    if ($(window).scrollTop()){
        if($isScrolledToTop == false) {
            $.when($('#navbar').css('padding', '0px')).done(function () {
                $('.logo img').fadeOut(400, function () {
                    $('.logo img').attr('src', 'images/small-logo.png');
                    console.log('bot');
                }).fadeIn();
            });
            $isScrolledToTop = true;
        } 
    } else {
        if($isScrolledToTop == true){
            $.when($('#navbar').css('padding', '20px 0px')).done(function () {
                $('.logo img').fadeOut(400, function () {
                    $('.logo img').attr('src', 'images/small-logo.png');
                    console.log('top');
                }).fadeIn();
            });
            $isScrolledToTop = false;
        }
    }
});

通过这种方式，您仅在两种情况下执行图像更改：

您离开页面顶部
您回到页面顶部

试一试，应该有用！

再见

FadeIn 和 fadeOut 在 window 滚动后发生多次

FadeIn & fadeOut happens multiple time after window scroll

html

javascript

jquery

scroll

fade