FadeIn/FadeOutでこの表示/非表示を設定（および簡略化）する方法は？

Question

私はウェブサイトを構築しようとしており、このようなことをしたいと思います。 3つの画像を表示したいのですが、各画像の直後に表示されるより多くのコンテンツを表示するために、それぞれの画像に「リンク」というページをスクロールしながら表示します。フェードインで表示するにはそのコンテンツが必要で、もう一度クリックするとフェードアウトと消滅が必要になります（表示：なし;）。私はフェードを部分的にすることに成功しましたが、フェードアウトはしませんでした。それはフェード効果なしで消える。また、一度に1つのdivしか開いていない必要があります。ここでのコードは、これまでだ：「：なしディスプレイ」やCSSやJavaScriptを簡略化することができる場合

$('.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>

私は必要なものの前にフェードアウトする方法を知っているではありません。この他に、ページの上部に「表示」コンテンツをスクロールし、コンテンツを「非表示にする」後に同じ位置にスクロールするようにします。

お手伝いできますか？

ペドロ

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>