更改时使 div 滑入新高度

Question

我环顾四周寻找我的问题的答案，我查看了这个堆栈溢出帖子以及这个问题，尽管它们对“滑入位置”的含义解释了不同的想要。

我想要实现的是当div的高度发生变化时，它会滑入新位置。

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

#footer {
  height: 50px !important;
}

然后我使用jQuery改变它：

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

目前，当加载这两个时，这是一个奇怪的即时变化，我正在寻找 div 刚刚落入新高度而不是立即更改的slideDown运动。

我知道这可以使用 CSS 来完成，因为我之前已经这样做了（但我找不到源代码）而更改示例80%宽度会随着页面移动而更改（尽管如果您有 jQuery/JS 解决方案，我不不介意）。

谢谢！

Answer 1

迈克尔·科克！

我这样做只是为了将问题标记为已完成。 我鼓励您发布您的答案并因此获得荣誉。 如果你这样做，我很乐意删除我的。 直到那时...

您必须通过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>

正如cal_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>