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

Question

我终于想出了如何使我的第一个徽标淡出以向下滚动显示第二个徽标的方法。 这个想法是，随着用户开始向下滚动，第一个徽标将逐渐淡出，而第二个徽标将逐渐淡入。我想从一个徽标无缝过渡到另一个徽标。 但是，我现在拥有的是第一个徽标变慢的淡出效果，然后第二个徽标在没有逐渐淡入的情况下出现...尽管我包括了我认为是正确淡入效果的正确代码。 我做错了什么？ 在此先感谢您的帮助。

<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

当代码中已经有徽标时，为什么要替换HTML？ 用以下代码替换if (scroll > 0)的代码：

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

首先，它使显示的徽标褪色，然后，通过setTimeout设置的延迟，触发第二个徽标的淡入。 为了获得更好的过渡效果，请将setTimeout降低到500左右，但是，您需要使用DOM中的徽标位置，以使新标记位于旧标记之上，而不是在其旁边或顶部（ position: relative ， position: absolute ）

Answer 2

• 您可以使用.eq()在徽标之间进行切换
• 使用.stop()停止重复播放动画。 尝试将其删除以查看
• 您可以根据需要在eq(0)和eq(1)切换

例子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> 

示例2使用attr("src")

• 您只能使用一个<img>标记并更改其src属性
• 使用.stop()停止重复播放动画。 尝试将其删除以查看

 $(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> 

示例3您需要解决css样式以避免两个图像位置之间的延迟

 $(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>