Сдвиньте анимацию с дисплея: none для отображения: block?

Есть ли способ для анимации отображения: none для отображения: блок с использованием CSS, чтобы скрытый div скользил вниз, а не внезапно появлялся, или я должен идти об этом по-другому?

HTML:

<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content
    </div>
</div>

CSS

#box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }

И вот мой script:

$(document).ready(function() {
    $('#box').click(function() {
        $(this).find(".hidden").toggleClass('open');
    });
});

И JSFiddle

Ответ 1

Да, есть способ: http://jsfiddle.net/6C42Q/12/

Используя CSS3-переходы и манипулируя высотой, а не отображая свойство:

.hidden {
    height: 0px;
    -webkit-transition: height 0.5s linear;
       -moz-transition: height 0.5s linear;
        -ms-transition: height 0.5s linear;
         -o-transition: height 0.5s linear;
            transition: height 0.5s linear;
}

.hidden.open {
     height: 200px;
     -webkit-transition: height 0.5s linear;
        -moz-transition: height 0.5s linear;
         -ms-transition: height 0.5s linear;
          -o-transition: height 0.5s linear;
             transition: height 0.5s linear;
}

Подробнее здесь: Сдвиньте div на клик Чистый CSS?

Ответ 2

Поскольку вы уже используете jQuery, проще всего использовать slideDown(). http://api.jquery.com/slidedown/

Там также slideToggle().

Тогда вам не нужно вручную выполнять все связанные с браузером css.

Ответ 3

Мне нравится идея переходов CSS, но она все еще очень нервная. Иногда максимальная высота должна быть установлена на очень высокое число из-за динамического содержимого, что делает переход бесполезным, так как он очень нервничает. Итак, я вернулся в jQuery, но у него были свои недостатки. встроенные элементы являются неустойчивыми.

Я нашел, что это работает для меня:

$(this).find('.p').stop().css('display','block').hide().slideDown();

Стоп останавливает все предыдущие переходы. Css гарантирует, что он будет рассматриваться как элемент блока, даже если это не так. Скрытие скрывает этот элемент, но jquery будет помнить его как элемент блока. и, наконец, slideDown показывает элемент, сдвинув его вниз.

Ответ 4

Что насчет

$("#yourdiv").animate({height: 'toggle'});

Toggle переключит ваш div вкл/выкл, а анимация должна появиться снизу. В этом случае вам не нужен специальный CSS, чтобы "скрыть" его.

Ответ 5

Вы также можете использовать

$('#youDiv').slideDown('fast');

или вы можете сказать, что активный div идет вверх, а вызываемый - вниз

$('.yourclick').click(function(e) {
       var gett = $(this).(ID);
       $('.youractiveDiv').slideUp('fast', function(){
        $('.'+gett).slideDown(300);
       });
});

Что-то вроде этого.