我需要平稳地实现显示隐藏动画。
我将在布局更改中复制所有内容,然后在类名中添加其他div(带有classname group hide
),例如在示例中添加jQuery配置代码,但这没有用。
问题是我认为on
是group
类,button click
对于我来说这是行不通的,必须在触发时将其添加到类中。
请帮忙
// 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>
事实是,您的按钮位于group
元素下方的DOM中,并且jquery尝试查找next
仅将元素移至元素上方on
并将被触发的元素。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句