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');
});

正如您可能已经猜到的那样，这会导致元素从左上角滑入，而不是从顶部滑入（因为当元素为“display none”时，它没有宽度）。

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

Answer 1

你可以尝试

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

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

Answer 2

看看这是否可以使你的工作。

div
{
visibility:hidden;
}

Answer 3

http://codepen.io/jsdev/pen/nrKBi

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

$('#closeContactBtn').click(function(){
    $('#contact-form').css({
      top: '',
      height: 0
    });
});

您无需在表单上设置100％的宽度

display：none时给元素一个宽度;

3 个答案: