Animate/Slow down elements filling space left by removed element

Question

Here is my example: http://jsfiddle.net/MT5xS/

When you click the first picture, it is removed and all the following images move back to fill the space left by it. But they move too fast and you don't even get the notion that they moved.

My question is, how do I make these elements move smoothly? Basically like an iPhone when you move or delete an icon, like this http://youtu.be/-r7K4LTbI4A?t=27s

I'm not worried about IE6/7/8 or any other compatibility issues.

Answer 1

The most common solution I know off is to animate hide(), then in the callback function remove your image.

$('.user-pic').live('click', function() {
    var $item = $(this).closest('li');
    $item.hide('slow', function(){ $item.remove(); });
});​

DEMO - Animate element removal

Answer 2

Take a look at this jQuery plugin: http://razorjack.net/quicksand/

It does what I think you are describing. You could use it or take a look under the covers to see how its being done. I believe they're using position: absolute on all the grid items.

Answer 3

Another option is to fadeTo 0, animate() the image width to 0, then remove().

http://jsfiddle.net/MT5xS/2/