同时对顶部和底部的div高度进行动画处理

Question

我正在尝试同时使用两侧（顶部，底部）的动画更改div高度。怎么做对呢？

这是我的示例，我不能同时集成两个动画。 也许有一些CSS解决方案？

$('div').click(function(){
     $init = $(this).height(); 
     $slice = 60;
    $(this).animate({
	
	marginTop:$init-$slice +'px',
	height:$slice+'px'
	}, 1000);
$(this).animate({
	
	height:'20px'
	}, 1000);
})

.square {
height:100px;
width: 100px;
background:black;
position:absolute;
color:#fff;
overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square">

  1<br>
  2<br>
  3<br>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  

</div>

Answer 1

尝试一下

$('div').click(function(){
     $(this).toggleClass("animate");
});

.square {
height:120px;
width: 100px;
background:black;
position:absolute;
color:#fff;
overflow:hidden;

transition:all 750ms;
}

.animate{
  height:20px;
  margin-top:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square">

  1<br>
  2<br>
  3<br>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  

</div>