动画 DIV 的高度和宽度变化[关闭]答案

【问题标题】：Animating DIV change in height and width [closed]动画 DIV 的高度和宽度变化[关闭]
【发布时间】：2012-10-24 07:52:11
【问题描述】：

如何为 div 的高度和宽度变化设置动画？不会有会触发动画的事件，而是会在 (this) div 的大小发生变化的任何时候发生的动画。这个想法是当 div 中的内容或多或少时，对 div 的大小变化进行动画处理。

【问题讨论】：

使用css transitions。
恭喜！当天含糊不清的问题。
@gdoron：这个问题怎么含糊？
我认为问题是“如何在元素内容更改时触发事件，以便我可以更改其属性？” @Kevin，这是正确的吗？

标签： jquery html jquery-animate height width

【解决方案1】：

在 CSS3 中，您可以在任何元素上设置 'transition' 属性，这将为您提供您想要的效果，而无需担心事件触发。

可以指定动画的property、duration和function（类型），如下图：

#divWithAnimation
{
    transition: height 1s linear;
}

虽然IE不支持属性“transition”，但其他浏览器使用自己的前缀，如下：

#divWithAnimation
{
  -webkit-transition: height 1s linear;
  -moz-transition: height 1s linear;
  -ms-transition: height 1s linear;
  -o-transition: height 1s linear;
  transition: height 1s linear;
}

您应该在样式表中使用所有这些，以便为所有可用的浏览器提供支持。更多关于过渡（和 CSS3 的其他酷特性）的信息和教程可以在W3Schools website 上找到。

有一个非常好的CSS3 generator 可以为所有浏览器生成代码。肯定会推荐它。

【讨论】：

【解决方案2】：

CSS3 过渡肯定是最好的方式 - 非常干净，您可以让浏览器完成工作。不过，如果你需要 IE 支持的话，jQuery animate 是个不错的选择。

这并不像 coule 那样简单，因为您无法在 div 上侦听 resize()，而只能在窗口上侦听。

虽然有一些插件可用，比如这个：http://www.jqui.net/demo/mutate/

【讨论】：