如何使用FadeIn / FadeOut设置工作（并简化）此显示/隐藏？

时间：2017-02-07 01:03:04

标签： javascript css toggle css-animations fadeout

我正在尝试建立一个网站，我想做这样的事情。我希望在向下滚动页面时显示三个图像，每个图像都有一个“链接”，以显示每个图像后面出现的更多内容。我需要用淡入淡出来显示内容，当我再次点击时，它需要淡出并消失（显示：无;）。我设法做了部分淡出，但没有淡出。它消失了，没有褪色效果。此外，一次只能打开一个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是否可以简化。除此之外，我希望页面将“显示”内容滚动到页面顶部，并在我们“隐藏”内容后滚动到相同位置。

你们有人可以帮忙吗？

佩德罗

1 个答案:

答案 0 :(得分：0)

为什么不尝试链接，函数和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>

相关问题
最新问题