CODEWITHSUNDEEP
javascriptjquerycss
123
123

Reputation: 97

Animate change div height from top and bottom at same time

I'm trying to change div height using animation from both sides (top,bottom) at the same time. How to do it right?

Here is my example, I can't integrate the both animations in same time. Or maybe there is some css solution?

$('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>

Upvotes: 0

Views: 208

Answers (1)

sarbudeen
sarbudeen

Reputation: 170

Try this

$('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>

Upvotes: 1

Related Questions