jQuery特殊div高度动画

Question

有没有一种方法可以通过允许div的顶部和底部都扩展来在jQuery中设置div高度的动画？ 我想在LDS主页上进行类似操作：www.lds.org。 顶部横幅图片左侧的div是我想要的类型。

Answer 1

通过将div设置为动画高度时，可以向上移动div来创建它在向上和向下扩展的错觉。

<html>

<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready( function() {
    var d = $('div');
    d.css('top', '250px').css('height', 0);
    d.animate( {
        height: '500px',
        top: 0
    } , 3000 );
} );
</script>
<style>
div {
    width: 500px;
    height: 500px;
    background: #f00;
    position: absolute;
}
</style>
</head>

<body>
<div></div>
</body>

</html>