Дергание элементов при скрытии кнопки

294
15 декабря 2016, 16:27

При нажатии кнопки "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"> не подпрыгивал? Хотелось бы всё сделать плавно.

Answer 1

Улучшенная версия изначального кода. Сначала используем visibility: hidden для скрытия элемента, затем, после анимации, display: none:

$(document).ready(function () {
    $(".show-more").click(function () {
        var button = $(this).find("button").first();
        $(this).find(".more").first().slideDown(900, function() {
            button.hide();
        });
        button.css('visibility', 'hidden');
    })
});

Полный пример в fiddle.

READ ALSO
Контент на всю ширину экрана в адаптивной версии

Контент на всю ширину экрана в адаптивной версии

Добрый день, уважаемые специалистыЯ в ступоре, ибо не могу понять как работает адаптивность на моем сайте

311
Как получить данные из поля формы?

Как получить данные из поля формы?

Например, есть элементы:

321
Не присваиваются поля в Calendar.setup

Не присваиваются поля в Calendar.setup

Есть календарьНе могу присвоить параметры в календаре - выводит alert что не присвоены параметры, то есть получается, что setup вызывается, но не присваиваются...

345