При нажатии кнопки "Load More Projects"
подгружаются следующие проекты. Резко подскакивает следующий блок div
при скрытии кнопки, а .slideDown()
идет рывками.
JS:
$(document).ready(function() {
$(".show-more").click(function() {
$(this).find(".more").first().slideDown(900)
$(this).find("button").first().css({ "display": "none" });
})
});
Что нужно сделать?
Нашел такой код, но не знаю как его модифицировать:
$('div').click(function() {
$(this).animate({height: $(this)[0].scrollHeight}, 200);
});
HTML:
<section class="profile" id="profile">
<div class="row">
<div class="cols col-12">
<div class="wrapper">
<div class="show-more" style="z-index:99">
<button class="button transition" type="submit">LOAD MORE PROJECT</button>
<div class="more" style="display:none;">
<li>
<div class="row">
<div class="cols col-6">
<ul class="cd-item-wrapper">
<li data-type="all" class="is-visible">
<img src="img/portfolio1.png" alt="thumbnail">
</li>
<li data-type="web" class="is-hidden">
<img src="img/portfolio2.png" alt="thumbnail">
</li>
<li data-type="apps" class="is-hidden">
<img src="img/portfolio3.png" alt="thumbnail">
</li>
<li data-type="icons" class="is-hidden">
<img src="img/portfolio4.png" alt="thumbnail">
</li>
</ul>
<ul class="cd-item-wrapper wrapper">
<li data-type="all" class="is-visible">
<h5>Isometric perspective mock-up</h5>
</li>
<li data-type="web" class="is-hidden">
<h5>Time zone app ui</h5>
</li>
<li data-type="apps" class="is-hidden">
<h5>Viro media players ui</h5>
</li>
<li data-type="icons" class="is-hidden">
<h5>Blog/magazine flat ui kit</h5>
</li>
</ul>
</div>
<div class="cols col-6">
<ul class="cd-item-wrapper">
<li data-type="all" class="is-visible">
<img src="img/portfolio1.png" alt="thumbnail">
</li>
<li data-type="web" class="is-hidden">
<img src="img/portfolio2.png" alt="thumbnail">
</li>
<li data-type="apps" class="is-hidden">
<img src="img/portfolio3.png" alt="thumbnail">
</li>
<li data-type="icons" class="is-hidden">
<img src="img/portfolio4.png" alt="thumbnail">
</li>
</ul>
<ul class="cd-item-wrapper wrapper">
<li data-type="all" class="is-visible">
<h5>Isometric perspective mock-up</h5>
</li>
<li data-type="web" class="is-hidden">
<h5>Time zone app ui</h5>
</li>
<li data-type="apps" class="is-hidden">
<h5>Viro media players ui</h5>
</li>
<li data-type="icons" class="is-hidden">
<h5>Blog/magazine flat ui kit</h5>
</li>
</ul>
</div>
</div>
</li>
<div style="z-index:99">
<button class="button transition" type="submit">NO MORE PROJECTS</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="about" id="about">
<div class="container">
<div class="row wow fadeIn" data-wow-duration="1s">
<div class="cols col-12">
<div class="title wrapper">
<h1>WHAT POEPLE SAY ABOUT US</h1>
</div>
<div class="content wrapper">
<h5>Our clients love us!</h5>
</div>
</div>
</div>
</section>
<section class="profile">
содержит кнопку, которая подгружает проекты. При ее нажатии срабатывает display: none
, и она скрывается. В это время <section class="about">
подпрыгивает вверх до того места, где начиналась кнопка, а потом плавно появляются новые проекты растягиванием <section class="profile">
вниз.
Как сделать так, чтобы <section class="about">
не подпрыгивал? Хотелось бы всё сделать плавно.
visibility
вместоdisplay
: пример.