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中的徽标位置，以使新徽标位于旧徽标之上，而不是在其旁边或顶部（{{1} ，position: relative）

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>

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

2 个答案: