javascript - animate div movement relative to another div size change -

having issue making animation work me.

essentially have vertical scrolling page several div elements vary in size based on content being displayed. what's happening these size changes occur other elements jumping abruptly based. i'd make these bit more smooth.

this part of massive project (angular) can't bring in external libraries. i've created jfiddle illustrates problem.

$('.close').click(function () {     $(this).parent().parent().height(0);     $(this).parent().parent().slideup(500);// in case if want move second div up.  }); 

http://jsfiddle.net/zberq/5/

so summarize, issue not element who's height changing. issue elements below instantly jumping or down in response height change.

i first removed line $(this).parent().parent().height(0); - not sure if u need or not.

then in remaining removed .parent , seems smoother, margin jump.

fiddle

https://jsfiddle.net/hastig/zberq/17/

js

$('.close').click(function() {     $(this).parent().slideup(400); }); 

css (stripped down)

.publication1 {     background: red;     color: white; }  .publication2 {     background: green;     color: white; }  .publication3 {     background: blue;     color: white; }