Question

我已经四处寻找我的问题的答案，我看了this stack overflow post以及this question，虽然他们解释了对意义的不同想法＆＃34;滑入位置＆＃34;

我想要达到的目标是当 div 的高度发生变化时，它会滑入新位置。

假设我的静态高度为50px，如：

#footer {
  height: 50px !important;
}

然后我使用 jQuery ：

更改它

$('#footer').height(100);

目前，当这两个人被加载时，它是一个奇怪的瞬间变化，我正在寻找slideDown动作，其中div刚刚落入新的高度而不是立即改变。< / p>

我知道这可以使用CSS完成，因为我之前已经完成了这项工作（但我无法找到源代码），而更改示例80%宽度将随着页面移动而改变（虽然你有jQuery / JS解决方案我不介意。

谢谢！

Answer 1

Michael Coker!

我这样做只是为了让问题可以标记为已完成。我鼓励你发布你的答案，并获得它的功劳。如果你这样做，我很乐意删除我的。在那之前......

您必须使用transition更新样式，然后移除!important：

#footer {
  height: 50px; /* You got to remove !important or it'll override jQuery */
  /* and for older broswer support */
  -webkit-transition: height .5s;
  -moz-transition: height .5s;
  -o-transition: height .5s;
  transition: height .5s;
}

可以顺利使用$('#footer').height(100);

示例：

$('#footer').height(100);

#footer {
  height: 50px;
  background: red;
  width: 100%;
  /* And for older broswer support */
  -webkit-transition: height .5s;
  -moz-transition: height .5s;
  -o-transition: height .5s;
  transition: height .5s;
  transition: height .5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="footer"></div>

正如cale_b所指出的那样，这也可以完成：

$('#footer').animate({height: '100px'}, 500);

//Because jQuery doesn't support 'easeInOut', you'll need jQuery UI to support it. I just omitted it from this example.

#footer {
  height: 50px;
  background: red;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="footer"></div>

更改后，将div滑动到新的高度

1 个答案:

Michael Coker!