显示隐藏动画不起作用答案

【问题标题】：Show hide animation don't work显示隐藏动画不起作用
【发布时间】：2018-05-26 12:30:13
【问题描述】：

我需要顺利实现显示隐藏动画。

我在codepen中有我想要的示例

我将复制我的 layout 中的所有内容更改类名添加额外的 div（类名 group hide），例如添加 jQuery 配置代码，但这不起作用。

问题是我认为on 类。在我的情况下它不起作用。当button click 被触发时，它必须添加到group 类中。

请帮忙

// js to the rescue
var b = $('body');
var isToggled = false; // default state
var origTextStr = b.find('button').text();

$(document).on('click', 'button', function(){
	
	var t = $(this),
			next = t.nextAll('.group').first(),
			nextObj = t.nextAll('.design_block');
	
	// change text str
	if( !isToggled ) { t.text('Hide more'); } else { t.text(origTextStr); }
	
	// get height of 'next'
	var nextHeight = next.height() + 'px';
	
	// add transform to all 'next'
	if( !isToggled ){
		nextObj.css('transform', 'translateY('+ nextHeight +')');
		next.addClass('on');
		//addClass('on');
		isToggled = true;
	}
	else {
		nextObj.css('transform','translateY(0)');
		next.removeClass('on');
		isToggled = false;
	}
	
});

body.on {
  overflow: hidden;
}

.our_works {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
}
.our_works .design_block {
  width: 210px;
  margin-bottom: 20px;
  overflow: hidden;
  backface-visibility: hidden;
}
.our_works .architecture_img {
  width: 210px;
  height: 198px;
}
.our_works .more_posts {
  margin-top: 15px;
  border-radius: 2px;
  background-color: #2a323d;
  padding: 12px 0 13px 0;
  color: #fff;
  width: 200px;
  border: none;
  margin: 0 auto;
}
.our_works .more_posts a {
  color: #fff;
}
.our_works .more_posts a:hover {
  text-decoration: none;
}

.group {
  position: absolute;
  z-index: 0;
  left: 0;
}
.group .design_block {
  opacity: 0;
  transform: translateY(100px);
  visibility: hidden;
}
.group .design_block:nth-child(1) {
  transition-delay: 0.1s;
}
.group .design_block:nth-child(2) {
  transition-delay: 0.15s;
}

.group.on .design_block {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.design_block {
  transform: translateY(0);
  transition: all 1s cubic-bezier(0.4, 0, 0, 1);
  width: 100%;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="our_works">
      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY HOMES</h6>
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6>
        <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">ARCHITECTURE</h6>
        <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY HOMES</h6>
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6>
        <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div>
      </div>


      <!-- hidden blocks -->
    <div class="group hide">
      
      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY HOMES</h6>
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6>
        <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">ARCHITECTURE</h6>
        <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY HOMES</h6>
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6>
        <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div>
      </div>
 </div>
      <button class="more_posts">
        <a href="javascript:void(0)">More</a>
      </button>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

问题是你的按钮在你下面的 DOM 中 group 元素和 jquery 试图找到 next 元素只要把它移到上面，on 就会被触发。

【讨论】：

一秒钟我会检查你的答案
这没有帮助 =(
你把它放高了这里：codepen.io/anon/pen/VxoPzE应该可以工作
是的，刚刚检查了 jquery 'on' think。将调查 css 部分。
啊，引导程序“隐藏”类完美地完成了它的工作。它总是隐藏它:) 删除它，你的幻灯片就可以工作了。

【解决方案2】：

使用 slideToggle() jQuery 方法代替 CSS 动画，更简单，运行更流畅。如果您担心性能，请不要使用 jQuery。该按钮位于position:fixed 中，因此不会妨碍您。切换布局，以便一次只显示一行。如果您希望更改行为以使底行是唯一切换的行，请参阅代码中的 cmets，这是一个简单的单行交换。

演示

$(function() {

  $('.btn').on('click', moreLess);

  function moreLess(e) {
    $('.btn').toggleClass('more less');
    $('.row').slideToggle('slow');
    /* Swap the line below with the line above if you want only
    || the bottom row to show/hide
    */ // $('.hide').slideToggle('slow');
  }
});

body.on {
  overflow: hidden;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
}

.design {
  width: 210px;
  margin-bottom: 20px;
  overflow: hidden;
}

img {
  width: 210px;
  height: 198px;
}

.more,
.less {
  position: fixed;
  top: 30vw;
  right: 0;
  background-color: rgba(11, 12, 233, 0.5);
  padding: 12px 0 13px 0;
  color: #fff;
  width: 200px;
  border: none;
  margin: 15px auto 0;
  height: 60px
}

.more a,
.less a {
  color: gold;
  font: 900 20px/1 Verdana;
}

.more a:hover,
.less a:hover {
  text-decoration: none;
}

.btn.more a::before {
  content: 'More...'
}

.btn.less a::before {
  content: '...Less'
}

.hide {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="container">
  <section class="row">
    <article class="content">
      <div class="design">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="title">CELEBRITY HOMES</h6>
        <div class="preview">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="title">ARCHITECTURE + DESIGN</h6>
        <div class="preview">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div>
      </div>

      <div class="design">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="title">ARCHITECTURE</h6>
        <div class="preview">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div>
      </div>

      <div class="design">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="title">CELEBRITY HOMES</h6>
        <div class="preview">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="title">CELEBRITY LIFESTYLE</h6>
        <div class="preview">This Charming Welsh Cottage Is Only Accessible by Steam Train</div>
      </div>

    </article>
  </section>
  <button class="btn more">
        <a href="javascript:void(0)"></a>
      </button>
  <section class='row hide'>
    <article class='content'>
      <!-- hidden blocks -->


      <div class="design">
        <img src="https://static.boredpanda.com/blog/wp-content/uploads/2014/03/fairy-tale-houses-23.jpg" alt="" class="architecture_img">
        <h6 class="title">CELEBRITY HOMES</h6>
        <div class="preview">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design">
        <img src="https://static.boredpanda.com/blog/wp-content/uploads/2014/03/fairy-tale-houses-23.jpg" alt="" class="architecture_img">
        <h6 class="title">ARCHITECTURE + DESIGN</h6>
        <div class="block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div>
      </div>

      <div class="design">
        <img src="https://static.boredpanda.com/blog/wp-content/uploads/2014/03/fairy-tale-houses-23.jpg" alt="" class="architecture_img">
        <h6 class="title">ARCHITECTURE + DESIGN</h6>
        <div class="block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div>
      </div>


      <div class="design">
        <img src="https://static.boredpanda.com/blog/wp-content/uploads/2014/03/fairy-tale-houses-23.jpg" alt="" class="architecture_img">
        <h6 class="title">ARCHITECTURE + DESIGN</h6>
        <div class="block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div>
      </div>


      <div class="design">
        <img src="https://static.boredpanda.com/blog/wp-content/uploads/2014/03/fairy-tale-houses-23.jpg" alt="" class="architecture_img">
        <h6 class="title">ARCHITECTURE + DESIGN</h6>
        <div class="block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div>
      </div>


    </article>
  </section>
</main>

【讨论】：