Jquery animation doesn't work properly with the list items

Question

I have a vertical list of items each with a delete button. When I click delete on one I want the ones beneath to slide up smoothly, at the moment they are jumping.

Here

Answer 1

Actually im not sure if you can do this using li because the elements are not actually animating , they are just being resorted , which means nothing like margin , position or padding is changing , but i think you can achieve the desired effect if you use divs , a plugin like shapeshift may help you as well.

http://mcpants.github.io/jquery.shapeshift/

Edit:

this is a quick solution i thought of , so hope it helps .

Hint:

you can remove the element after animation is over via .remove()

http://fiddle.jshell.net/prollygeek/8zs3L/1/