Question

我有一个div

    <div class="dropdwn"></div>

我希望它是屏幕的整个宽度，矩形的底部用流畅的动画展开25像素（向下）。

    .successDropdwn {
      width: 100%;
      max-height: 0;
      overflow: hidden;
      color: green;
      -webkit-transition: max-height 0.8s;
      -moz-transition: max-height 0.8s;
      transition: max-height 0.8s;
   }

Answer 1

这样的东西???

＆＃13;

$('.dropdwn').slideDown('slow')

＆＃13;

.dropdwn{
  background-color:#dddddd;
  height:25px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdwn" style="display:none"></div>

＆＃13;

Answer 2

我不确定你想要做什么，但这是通过使用jquery切换类来使用转换的示例：

https://jsfiddle.net/gydg7j9m/5/

.dropdwn {
  background: firebrick;
  width: 100%;
  height: 50px;
  max-height: 0;
  overflow: hidden;
  color: green;
  transition: max-height 0.8s;
}

 .expand {
    max-height: 150px;
 }

的jQuery

$('#btn').on('click', function(){
$('.dropdwn').toggleClass('expand')
});

按钮单击后使Div矩形展开（高度）

2 个答案: