jquery - 从顶部和底部以及从底部到顶部拉伸 div 高度

Question

有谁知道我怎么能用这里的图像处理这个togle效果？当然我不需要淡入淡出——它们只是用来模拟拉伸和展开运动。！

http://img837.imageshack.us/img837/6237/jxz.gif

我到现在唯一的代码是这样的：

HTML

<a id="line-1">click</a>
<div id="unique-id">
<div class="bum">
    dsfsadfasdfsafd
</div>

CSS

#unique-id {
width: 100%;
height: 200px;
background-color: red; 
position: absolute;
bottom: 0px;
}
.bum {
background: green;
width:60px;
height: 60px;
top:50%;}

JS

// Activate Line 1
$('a#line-1').click(function() {
console.log()
$('div#unique-id').animate({
    position: 'relative',
    height: 'toggle'
}, 500, function() {

});
});

http://jsfiddle.net/t9yJD/54/ 但这不是我真正喜欢的:)

感谢所有堆垛机；）最好的问候，H。

Answer 1

好的 所以诀窍是在相对定位的 div 中使用绝对定位auto margin的 div。所以它可以从中心生长。我创造了一个小提琴看看它在行动

.container {
    position: relative;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}