jquery - 动画 DIV 的高度和宽度变化

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;
}

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

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

Answer 2

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

它并不像 coule 那样简单，因为您不能resize()在 div 上收听，只能在窗口上收听。

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