Javascript 同时设置从顶部和底部更改div高度的动画

我试图同时从两侧（顶部、底部）使用动画来更改div高度。如何做对

这是我的例子，我不能同时集成两个动画。 或者可能有一些css解决方案

$（'div'）。单击（函数（）{
$init=$（this.height（）；
$slice=60；
$（此）。设置动画({
marginTop:$init-$slice+'px'，
高度：$slice+'px'
}, 1000);
$（此）。设置动画({
高度：'20px'
}, 1000);
})

.square{
高度：100px；
宽度：100px；
背景：黑色；
位置：绝对位置；
颜色：#fff；
溢出：隐藏；
}

1

2

3

4

5

6

7

8

9

试试这个

$（'div'）。单击（函数（）{
$（this.toggleClass（“动画”）；
});
.square{
高度：120px；
宽度：100px；
背景：黑色；
位置：绝对位置；
颜色：#fff；
溢出：隐藏；
过渡：所有750ms；
}
.制作动画{
高度：20px；
边缘顶部：50px；
}

1

2

3

4

5

6

7

8

9

删除第二个
动画
，在第一个.lol中使用
高度：20
。非常感谢。