Question

我如何设想div的高度和宽度变化？不会有会触发动画的事件，而是在（this）div的大小发生变化时会发生的动画。这个想法是当div中有更多或更少的内容时，动画div的大小变化。

Answer 1

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

您可以指定动画的属性，持续时间和功能（类型），如下所示：

#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可以为所有浏览器生成代码。肯定会推荐它。

Answer 2

CSS3过渡是最好的方式 - 确实很干净，你让浏览器完成工作。但是，如果你需要在IE中支持jQuery动画是一个很好的方法。

它并不像它那样简单，因为你不能在div上只听一个resize()。

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

动画DIV的高度和宽度变化

2 个答案: