如何设置工作(和简化)此显示/隐藏与淡入/淡出

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>