Добавьте эффект постепенного появления / исчезновения логотипов в заголовке, когда они переключаются с одного на другой при прокрутке вниз

Question

У меня логотип1 в заголовке меняется на логотип2 при прокрутке пользователя вниз. Тем не менее, я не хочу, чтобы логотипы мгновенно переключались, а скорее первый логотип постепенно исчезает по мере появления второго логотипа. Я добавил .fadeIn (медленный) и .fadeOut (медленный) в разных местах в моем js, но это имело место нет эффекта. Надеюсь, я могу получить помощь с этим.

Я обновил свой вопрос, добавив больше кода. У меня было 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>

Answer 2

Я отредактировал свой ответ. Я пропустил ошибку в вашем коде. Я прокомментировал ниже в кодах. Вы можете использовать как fadeIn & fadeOut, так и методы show & hide. Но для эффекта затухания использование fadeIn & fadeOut может выглядеть лучше, чем show & hide

$(document).ready(function() {
        $(window).scroll(function() {
          var scroll = $(window).scrollTop();
          if (scroll >= 0 && scroll <= 120) { // I missed this logic mistake for the first time. 
            $(".navbar").addClass("navbar-scroll");
            $(".logo").fadeIn(300); // or show(300)
          } else {
            $(".navbar").removeClass("navbar-scroll");
            $(".logo").fadeOut(0); // or hide()
          }
          if (scroll > 120) {
            // $(".navbar").addClass("nav-color");
            $(".logo_main").fadeIn(300);
            $(".logo").fadeOut(0);
          } else {
            // $(".navbar").removeClass("nav-color");
            $(".logo_main").fadeOut(0);
            $(".logo").fadeIn(300);
          }
        });
      });