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

有人知道我怎么能用这张图片来处理这个图格效应吗？ 当然，我不需要淡入淡出-它们主要是为了模拟伸展和伸展运动。 !

到目前为止，我唯一的代码是：

HTML

JS

但这不是我真正喜欢的：）

感谢所有堆垛机；） 顺致敬意，

---

H.

好的，诀窍是在相对定位的div中使用绝对定位div和

自动边距

，这样它可以从中心开始增长。我创造了一把小提琴，你可以在里面看到它

---

我认为它不像你说的那样有效！：）它从上到下生长！

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

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

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

});
});

.container {
    position: relative;
}

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