javascript - 如何设置通过淡入/淡出来工作(并简化)此显示/隐藏？

Question

我正在尝试建立一个网站，我想做这样的事情。我想在向下滚动页面时显示三个图像，每个图像都是一个“链接”，以显示每个图像后面出现的更多内容。我需要该内容以淡入方式显示，当我再次单击时，它需要淡出并消失(显示:无；)。我已经成功做到了部分淡入淡出，但没有做到淡出。它会消失而不会产生淡入淡出效果。而且一次只能打开一个 div。这是到目前为止的代码:

$('.expand, .card__btn-close').click(function() {                       
  $('.toggleText').removeClass('fadeOut'),
  $('.toggleText').toggleClass('fadeIn'),
  $('.toggleText--two').removeClass('fadeIn'),
  $('.toggleText--two').toggleClass('fadeOut');
  $('.toggleText--three').removeClass('fadeIn'),
  $('.toggleText--three').toggleClass('fadeOut');
}); 

$('.expand--two, .card__btn-close--two').click(function() { 
  $('.toggleText').removeClass('fadeIn'),
  $('.toggleText').toggleClass('fadeOut'),
  $('.toggleText--two').removeClass('fadeOut'),
  $('.toggleText--two').toggleClass('fadeIn');
  $('.toggleText--three').removeClass('fadeIn'),
  $('.toggleText--three').toggleClass('fadeOut');
}); 
            
$('.expand--three, .card__btn-close--three').click(function() { 
  $('.toggleText').removeClass('fadeIn'),
  $('.toggleText').toggleClass('fadeOut'),
  $('.toggleText--two').removeClass('fadeIn'),
  $('.toggleText--two').toggleClass('fadeOut');
  $('.toggleText--three').removeClass('fadeOut'),
  $('.toggleText--three').toggleClass('fadeIn');
}); 

.img {width:300px;height:50px;}
.toggleText.fadeIn, .toggleText--two.fadeIn, .toggleText--three.fadeIn {
          -moz-animation-name: fadeIn;
          -webkit-animation-name: fadeIn;
          -ms-animation-name: fadeIn;
          animation-name: fadeIn;
          -moz-animation-duration: .5s;
          -webkit-animation-duration: .5s;
          -ms-animation-duration: .5s;
          animation-duration: .5s;
          -moz-animation-timing-function: ease-in-out;
          -webkit-animation-timing-function: ease-in-out;
          -ms-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
          -moz-animation-fill-mode: forwards;
          -webkit-animation-fill-mode: forwards;
          -ms-animation-fill-mode: forwards;
          animation-fill-mode: forwards; 
          display:block;
        }
        
        .toggleText, .toggleText--two, .toggleText--three, .toggleText.fadeOut, .toggleText--two.fadeOut, .toggleText--three.fadeOut {
          -moz-animation-name: fadeOut;
          -webkit-animation-name: fadeOut;
          -ms-animation-name: fadeOut;
          animation-name: fadeOut;
            -moz-animation-duration: .5s;
          -webkit-animation-duration: .5s;
          -ms-animation-duration: .5s;
          animation-duration: .5s;
        display:none;
        }
        
        @-moz-keyframes fadeIn { 0% { opacity: 0; display: none; } 100% { opacity: 1; display: block; }}
        @-webkit-keyframes fadeIn { 0% { opacity: 0; display: none; } 100% { opacity: 1; display: block; }}
        @-ms-keyframes fadeIn { 0% { opacity: 0; display: none; } 100% { opacity: 1; display: block; }}
        @-keyframes fadeIn { 0% { opacity: 0; display: none; } 100% { opacity: 1; display: block; }}
    
        @-moz-keyframes fadeOut { 0% { opacity: 1; display: block; }  100% { opacity: 0; display: none; }} 
        @-webkit-keyframes fadeOut { 0% { opacity: 1; display: block; }  100% { opacity: 0; display: none; }} 
        @-ms-keyframes fadeOut { 0% { opacity: 1; display: block; } 100% { opacity: 0; display: none; }} 
        @-keyframes fadeOut { 0% { opacity: 1; display: block; } 100% { opacity: 0; display: none;  }} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Project 1 -->
<section>
  <a class="expand">
    <div class="img" style="background-image: url(http://marketplaceadsonline.com/marketplace/txshe/static/images/externallinks/Shoppers.png)"></div>        
  </a>  
  <div class="toggleText">
    <div class="card__content card__btn-close" style="color: #F00">
      Extra content 1 goes here!
      Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor. 
    </div> <!-- /card content -->
  </div> <!-- /toggleText -->
</section>

<!-- Project 2 -->
<section>
  <a class="expand--two">
    <div class="img" style="background-image: url(http://marketplaceadsonline.com/marketplace/txshe/static/images/externallinks/Shoppers.png)"></div>        
  </a>  
  <div class="toggleText--two">
    <div class="card__content card__btn-close--two" style="color: #F0F">
      Extra content 2 goes here!
      Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor. 
    </div> <!-- /card content -->
  </div> <!-- /toggleText -->
</section>

<!-- Project 3 -->
<section>
  <a class="expand--three">
    <div class="img" style="background-image: url(http://marketplaceadsonline.com/marketplace/txshe/static/images/externallinks/Shoppers.png)"></div>        
  </a>  
  <div class="toggleText--three">
    <div class="card__content card__btn-close--three" style="color: #00F">
      Extra content 3 goes here!
      Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor. 
    </div> <!-- /card content -->
  </div> <!-- /toggleText -->
</section>

<!-- Dummy content -->
<section>
  <div style="padding-top:50px;color:#0FF;">Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor. </div>
</section>

我需要的是知道如何在“display: none”之前淡出以及是否可以简化css和javascript。除此之外，我希望页面将“显示”内容滚动到页面顶部，并在“隐藏”内容后滚动到相同位置。

你们能帮忙吗？

佩德罗

Answer 1

为什么不尝试链接、函数和 CSS 简写属性呢？这是你想要的吗？

function clickhandler(num){
      return (function(){
          if(num === 3){
              $('.toggleText--three').removeClass('fadeOut').toggleClass('fadeIn');
          }else{
              $('.toggleText' + ((num - 1) ? '--two' : '')).removeClass('fadeOut').toggleClass('fadeIn');
          }
      });
};

$('#s1').click(clickhandler(1)); 

$('#s2').click(clickhandler(2)); 
            
$('#s3').click(clickhandler(3)); 

.img {width:300px;height:50px;}
.toggleText.fadeIn, .toggleText--two.fadeIn, .toggleText--three.fadeIn {
          -moz-animation: 1s ease-in-out forwards fadeIn;
          -webkit-animation: 1s ease-in-out forwards fadeIn;
          animation: 1s ease-in-out forwards fadeIn;
        }
        
        .toggleText, .toggleText--two, .toggleText--three, .toggleText.fadeOut, .toggleText--two.fadeOut, .toggleText--three.fadeOut {
          animation: 1s forwards fadeOut;
          -moz-animation: 1s forwards fadeOut;
          -webkit-animation: 1s forwards fadeOut;
        }
        
        @-moz-keyframes fadeIn { 0% { opacity: 0; display: none; position: absolute;top: -9999px;left: -9999px;} 100% { opacity: 1; display: block; position: static;}}
        @-webkit-keyframes fadeIn { 0% { opacity: 0; display: none;position: absolute;top: -9999px;left: -9999px;} 100% { opacity: 1; display: block;position: static;  }}
        @-keyframes fadeIn { 0% { opacity: 0; display: none;position: absolute;top: -9999px;left: -9999px;} 100% { opacity: 1; display: block; position: static; }}
    
        @-moz-keyframes fadeOut { 0% { opacity: 1; display: block; position: static; }  100% { opacity: 0; display: none;position: absolute;top: -9999px;left: -9999px;}} 
        @-webkit-keyframes fadeOut { 0% { opacity: 1; display: block;position: static;  }  100% { opacity: 0; display: none;position: absolute;top: -9999px;left: -9999px;}}
        @-keyframes fadeOut { 0% { opacity: 1; display: block; position: static; } 100% { opacity: 0; display: none;position: absolute;top: -9999px;left: -9999px; }} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Project 1 -->
<section id = "s1">
  <a class="expand">
    <div class="img" id = "img" style="background-image: url(http://marketplaceadsonline.com/marketplace/txshe/static/images/externallinks/Shoppers.png)"></div>        
  </a>  
  <div class="toggleText">
    <div class="card__content card__btn-close" style="color: #F00">
      Extra content 1 goes here!
      Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor. 
    </div> <!-- /card content -->
  </div> <!-- /toggleText -->
</section>

<!-- Project 2 -->
<section id = "s2">
  <a class="expand--two">
    <div class="img" id = "img--2" style="background-image: url(http://marketplaceadsonline.com/marketplace/txshe/static/images/externallinks/Shoppers.png)"></div>        
  </a>  
  <div class="toggleText--two">
    <div class="card__content card__btn-close--two" style="color: #F0F">
      Extra content 2 goes here!
      Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor. 
    </div> <!-- /card content -->
  </div> <!-- /toggleText -->
</section>

<!-- Project 3 -->
<section id = "s3">
  <a class="expand--three">
    <div class="img" id = "img--3" style="background-image: url(http://marketplaceadsonline.com/marketplace/txshe/static/images/externallinks/Shoppers.png)"></div>        
  </a>  
  <div class="toggleText--three">
    <div class="card__content card__btn-close--three" style="color: #00F">
      Extra content 3 goes here!
      Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor. 
    </div> <!-- /card content -->
  </div> <!-- /toggleText -->
</section>

<!-- Dummy content -->
<section>
  <div style="padding-top:50px;color:#0FF;">Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor. </div>
</section>