Скрытие блока: как добиться такого эффекта?

Question

Скрытие блока: как добиться такого эффекта?

Рейтинг: 0Ответов: 1Опубликовано: 10.11.2014

Не пойму, как добиться такого эффекта.

При скрытии блока нужно его поднять вверх, но проблема с контентом, который под блоком, его нужно поднимать по мере скрытия самого блока.

Вот пример link text.

Как видно, остается пустое место. Понятно, что можно еще и блок с контентом поднять, а можно ли обойтись без поднятия контента, т.е. можно ли создать такой же эффект совместно с slideToggle()?

javascript jquery

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

http://jsfiddle.net/L6mxrh8y/1/

HTML

<ul class="block">
    <li><button id="hide">скрыть блок</button></li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
<div>этот текст должен следовать в ходе закрытия блока</div>
<button class="reset">nоказать блок (для теста)</button>

JavaScript

$('#hide').on('click', function(){
        $('.block').slideUp();  
});

$('.reset').on('click', function(){
    var x = $('.block').slideDown();
});

CSS

.block {
    background: #eee;
    position: relative;
}

Скрытие блока: как добиться такого эффекта?

Ответы