我需要顺利实现显示隐藏动画。
我在 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>
最佳答案
关键是你的按钮在 DOM 中
group
元素和 jquery 试图找到 next
元素
只需将它移到上方,on
就会被触发。
关于javascript - 显示隐藏动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50542777/