javascript - 带有不同大小 Logo 的 Bootstrap 动画导航栏

Question

我正在尝试为 Bootstrap 导航栏设置动画。当页面加载时，您会看到完整尺寸的 Logo ，当您向下滚动时，导航栏尺寸会减小，并且较小的 Logo 会淡入。到目前为止，我遇到了一个小故障，最终可能会看到两个 Logo 如果您向下滚动一点，然后快速向上滚动。因此，我正在寻找一种最佳方法来确保在任何给定时间只有一个 Logo 。这是我的 jQuery:

var header_closed = false;
var header_open = true;
var timer;

$(window).scroll(function() {
    if (timer) {
        window.clearTimeout(timer);
    }
    timer = window.setTimeout(function() {
        if ($(document).scrollTop() > 20 && header_closed === false) {
            header_closed = true;
            header_open = false;
            $('.biglogo').fadeOut("fast", function() {
                $('.navbar-header').animate({
                    height: "54px"
                }, 250, function() {
                    $('.smllogo').fadeIn(500);

                });
            });


        } else if ($(document).scrollTop() < 20 && header_open === false) {
            header_open = true;
            header_closed = false;
            $('.smllogo').fadeOut(500, function() {
                $('.navbar-header').animate({
                    height: "138px"
                }, 250, function() {
                    $('.biglogo').fadeIn('fast');
                });
            });
        }
    }, 200);
});

html 只是一个普通的 Bootstrap 固定导航栏，带有两个导航栏品牌(小 Logo 有一个显示:隐藏；在加载时将其隐藏起来......有什么想法吗？

Answer 1

您可以在动画过程中更改img源吗？这意味着它们永远无法同时显示:

if ($(document).scrollTop() > 20 && header_closed === false) {
            header_closed = true;
            header_open = false;
            $('.logo').fadeOut("fast", function() {
                $('.navbar-header').animate({
                    height: "54px"
                }, 250, function() {
                    $('.logo').attr('src','small.jpg');
                    $('.logo').fadeIn(500);

                });
            });
} else if ($(document).scrollTop() < 20 && header_open === false) {
            header_open = true;
            header_closed = false;
            $('.logo').fadeOut(500, function() {
                $('.navbar-header').animate({
                    height: "138px"
                }, 250, function() {
                    $('.logo').attr('src','big.jpg');
                    $('.logo').fadeIn('fast');
                });
            });
        }
    }, 200);