jquery - 显示时给元素一个宽度 :none;

Question

我有一个小的 CSS 过渡，我想用它来让一个元素从其父元素后面滑出。

元素:

#contact-form{
    background: #f2f2f2;
    text-align: center;
    top:-20em;
    display:none;
    position: relative;
    padding: 2em 0;
    width:100%;

    -webkit-transition: top 0.2s ease;
    -moz-transition: top 0.2s ease;
    -ms-transition: top 0.2s ease;
    -o-transition: top 0.2s ease;
    transition: top 0.2s ease;
}

jQuery:

$('#contactBtn').click(function(){
    $('#contact-form').css('top', 0).toggle('display');
});

您可能已经猜到了，这会导致元素从左上角滑入，而不是仅仅从顶部滑入(因为当元素“不显示”时，它没有宽度)。

确保过渡仅针对元素的高度而不是宽度的最佳方法是什么？它需要从顶部开始:-20，因为它附加到出现在页面中间的导航栏。

Answer 1

你可以试试

$("#contact-form").slideToggle();

也许这个例子会有所帮助:http://jsfiddle.net/dJS4g/