0

我有一个小 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');
});

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

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

4

3 回答 3

1

你可以试试

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

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

于 2013-04-20T05:41:48.083 回答
0

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

div
{
visibility:hidden;
}
于 2013-04-20T05:42:46.610 回答
0

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%

于 2013-04-20T05:44:32.407 回答