如何使用FadeIn/FadeOut設置工作（並簡化）此顯示/隱藏？

Question

我想建立一個網站，我想要做這樣的事情。我想顯示三個圖像，同時向下滾動頁面，使每個圖像成爲「鏈接」，以顯示每張圖像後顯示的更多內容。我需要這些內容才能淡入顯示，當我再次點擊時，它需要淡出並消失（display：none;）。我設法部分淡化，但不淡出。它消失沒有褪色效果。此外，一次只能打開一個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>

我需要的是知道如何才淡出「顯示：無」，如果CSS和JavaScript可以簡化。除此之外，我希望頁面將「顯示」內容滾動到頁面頂部，並在「隱藏」內容後滾動到相同的位置。

你們能幫忙嗎？

Pedro

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>