1

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

15
  • добавил ссылку на сайт в посте выше
    – Юрий
    25 июн 2015 в 7:56
  • Не заметил никаких рывков в примере в fiddle. Браузер Opera 30.0.
    – Regent
    25 июн 2015 в 9:18
  • как-то не плавно, ну может быть вы и правы.
    – Юрий
    25 июн 2015 в 9:43
  • а как избавиться от подскакивания нижнего блока, хоть натолкните на идею
    – Юрий
    25 июн 2015 в 9:43
  • Если проблема в том, что из-за скрытия кнопки всё съезжает вверх, то можно либо скрывать кнопку после анимации: пример, либо использовать visibility вместо display: пример.
    – Regent
    25 июн 2015 в 9:48

1 ответ 1

0

Улучшенная версия изначального кода. Сначала используем 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.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.