javascript - 当向下滚动时从一个切换到另一个时，为标题中的 Logo 添加淡入/淡出效果

Question

当用户向下滚动时，标题中的 logo1 会更改为 logo2。但是，我不希望 Logo 立即切换，而是第一个 Logo 随着第二个 Logo 淡入而逐渐淡出。我在我的 js 的不同位置添加了 .fadeIn(slow) 和 .fadeOut(slow) 但它有没有效果。希望我能得到一些帮助。

我已经用更多代码更新了我的问题。我有 2 个答案，但都不能为我工作，也没有更多的回应。希望更详细的编辑问题会得到更多关注。

<header>
        <div id="nav" class="navbar">
            <div id="nav_left">
                <a href="index.html">HOME</a>
                <a href="services.html">SERVICES</a>
                <a href="portfolio.html">PORTFOLIO</a>
            </div>
            <a href="index.html" id="logo" class="Claire_logo">
                <img src="images/logo_6_small.png" alt="logo2" id="logo_Claire" class="logo_main"
                    style="display:none" />
                <img src="images/logo_bluebird_90_cc.png" alt="logo1" id="logo_Claire_blue" class="logo" />
            </a>
            <div id="nav_right">
                <a href="blog.html">BLOG</a>
                <a href="about.html">ABOUT</a>
                <a href="contact.html">GET IN TOUCH</a>
            </div>
        </div>
    </header>

$(document).ready(function() {
    $(window).scroll(function() {
      var scroll = $(window).scrollTop();
      if (scroll > 0) {
        $(".navbar").addClass("navbar-scroll");
        $(".logo").show();
      } else {
        $(".navbar").removeClass("navbar-scroll");
        $(".logo").hide();
      }
      if (scroll > 120) {
        // $(".navbar").addClass("nav-color");
        $(".logo_main").show();
        $(".logo").hide();
      } else {
        // $(".navbar").removeClass("nav-color");
        $(".logo_main").hide();
        $(".logo").show();
      }
    });
  });

Answer 1

你可以使用 jQuery replaceWith

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 0) {
      $('#oldlogo').fadeOut(500, function() {
        $('#oldlogo').replaceWith('<div id="newlogo"><img src="newlogo" alt="newlogo"/></div>').fadeIn(500);
      });
    }
  });
});

body {
  height: 200vh
}

header {
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
}

#nav {
  display: flex;
  justify-content: center;
  flex-direction: row;
  height: 180px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div id="nav" class="navbar">
    <div id="oldlogo"> <img src="oldlogooldlogo" alt="oldlogo" /></div>
  </div>
</header>