向下滚动时，第一个徽标逐渐消失，但是第二个徽标并未逐渐消失。 我想念什么？

Question

I've finally figured out how to get my first logo to fade out to reveal the second logo on scroll down. The idea is that as the user begins to scroll down, the first logo will fade out while the second logo fades in. I'm wanting a seamless, fluid transition from one logo to the other. But what I have now is the first logo slowing fading out and then the second logo just appearing without a gradual fade-in ... though I including what I believed to be the correct code for the proper fade-in effect. What have I done wrong? Thanks in advance for your help.

<div id="nav" class="navbar">
    <div id="full_logo"> <img src="images/logo_6_small.png" alt="full_logo" /></div>
</div> 

<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) {
        $('#logo_Claire_blue').fadeOut(800, function() {
          $('#logo_Claire_blue').replaceWith('<div id="full_logo"><img src="images/logo_6_small.png" alt="full_logo"/></div>').fadeIn(800);
        });
      }
    });
  });

Answer 1

Why are you replacing HTML when you already have your logo in the code? Replace the code of the if (scroll > 0) with this:

 $('#logo_Claire_blue').fadeOut(800);
 setTimeout(function() {
    $('#logo_Claire').fadeIn(800);
 }, 600)

First it fades the displayed logo, then, with a delay set by setTimeout , it triggers the fade in of the second one. For better transition lower the setTimeout to something like 500, but then, you need to play with the logos positions in the DOM in order for the new to be over the old one and not next to it or on top ( position: relative , position: absolute )

Answer 2

• You can use .eq() to change between logos
• Use .stop() to stop repeat the animation.. Try to remove it to see
• You change between eq(0) and eq(1) up to your need

Example 1

 $(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 0) { $('a.Claire_logo img').eq(1).stop().fadeOut(200 , function(){ $('a.Claire_logo img').eq(0).stop().fadeIn(200); }); }else{ $('a.Claire_logo img').eq(0).stop().fadeOut(200 , function(){ $('a.Claire_logo img').eq(1).stop().fadeIn(200); }); } }); }); 

 header{ position : fixed; top : 0; } main{ height : 2000px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo2" id="logo_Claire" class="logo_main" style = "display : none;"/> <img src="https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now" 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> <main></main> 

Example 2 using attr("src")

• You can use only one <img> tag and change src attribute of it
• Use .stop() to stop repeat the animation.. Try to remove it to see

 $(document).ready(function() { var Check = false; $(window).scroll(function() { var scroll = $(window).scrollTop(); if(scroll > 0 && Check == false){ Check = true; $('a.Claire_logo > img').stop().fadeOut(function(){ $(this).attr("src" ,"https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now").fadeIn(300); }); }else if(scroll <= 0){ Check = false; $('a.Claire_logo > img').stop().fadeOut(function(){ $(this).attr("src" ,"https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now").fadeIn(300); }); } }); }); 

 header{ position : fixed; top : 0; } main{ height : 2000px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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="https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now" alt="logo2" id="logo_Claire" class="logo_main"/> </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> <main></main> 

Example 3 You need to work around the css style to avoid the delay between both images places

 $(document).ready(function() { var Check = false; $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 0 && Check == false) { Check = true; $('a.Claire_logo img').eq(1).stop().fadeOut(800); $('a.Claire_logo img').eq(0).stop().fadeIn(800); }else if(scroll <= 0 && Check == true){ Check = false; $('a.Claire_logo img').eq(0).stop().fadeOut(800); $('a.Claire_logo img').eq(1).stop().fadeIn(800); } }); }); 

 header{ position : fixed; top : 0; } main{ height : 2000px; } .Claire_logo{ position : relative; height : 60px; display : block; } .Claire_logo > img{ position: absolute; top : 0; left : 0; height : 60px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo2" id="logo_Claire" class="logo_main" style="display : none;"/> <img src="https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now" 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> <main></main>