When an object is hidden in jQuery, surrounding elements snap in to new positions. How can I make them animate into new positions?

Question

I have a list of say, 20 items. Each of them are boxes in 3 columns, like a grid format.

Above the grid are options which allow you to show and hide different items within the list, depending on what you are looking for.

When a user hides specific list items, they fade out and all of the other items snap into their new positions.

After the smooth fade effect, the snapping action doesn't look too nice. Is their a way to make the elements slide into their new positions?

Thank you.

Answer 1

Animate the opacity and height of the element you're hiding.

Answer 2

you should look into jQuerys animate function the example should pretty much do what you want

 $('#clickme').click(function() {
  $('#book').animate({
    opacity: 0,
    height: 'toggle'
  }, 5000);
});