显示隐藏动画不起作用

时间：2018-05-26 12:30:14

标签： javascript jquery

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

我在codepen

中有我想要的例子

我会复制layout更改类名称中的所有内容添加额外的div（带有类名000000），例如添加 jQuery 配置代码，但这不是工作

问题是我认为public boolean isValidID(String id) { return id.matches("[0-9]{6}"); } 上课了。在我的情况下它不起作用。当group hide被触发时，必须加入on课程。

请帮忙

＆＃13;
＆＃13; 
group
＆＃13; 
button click
＆＃13; 
// 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;
	}
	
});
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

问题是你的按钮位于你的DOM下面 group元素和jquery尝试查找next元素 只需将其移至上方即可触发on。

答案 1 :(得分：1)

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

演示

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

相关问题
最新问题