Как настроить работу (и упростить) это Show/Hide с 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 может быть упрощена. Помимо этого, я хочу, чтобы страница прокручивала содержимое «Показать» до верхней части страницы, а также прокручивалась до той же позиции после того, как мы «Скрывали» контент.

Может ли кто-нибудь из вас помочь?

Педро

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>