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.

Possible Duplicate - http://stackoverflow.com/questions/1807187/how-to-remove-an-element-slowly-with-jquery — Scott Selby, Sep 08 '12 at 00:42

score 8 · Answer 1 · answered Sep 08 '12 at 00:28

8

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

answered Sep 08 '12 at 00:28

Nope

22,147
7
47
72

Wow, that was easy. I really like the effect. There is however, no easy way to animate that 4th picture going from the second row to the first one, right? I'd probably need some special plugin for that effect. – Ashitaka Sep 08 '12 at 00:34
http://stackoverflow.com/questions/1807187/how-to-remove-an-element-slowly-with-jquery – Scott Selby Sep 08 '12 at 00:38
@Ashitaka: That's a good question. I'm not sure off the top of my head. I have a look and let you know. – Nope Sep 08 '12 at 00:39
@ScottSelby: Nice find. You should propably add that as a comment to the original post though as a possible duplicate question. – Nope Sep 08 '12 at 00:39
@Ashitaka: I had a play-around but I don't think there is an easy way to do that. The items adjust after the removal and the items move along in a line very nicely (if in the same "row"). Smoothing out the part where the item moves from the below "row" into the one above though, I don't know how you would hook up into that. – Nope Sep 08 '12 at 00:47
Nevermind, someone already found a plugin. I don't know how easy it is to use and I think your solution is already good enough. I'm going to try this plugin for a bit and then I'll accept an answer, but thanks already. Even if I don't end up using this, at least I learnt something! :) – Ashitaka Sep 08 '12 at 00:53
@Ashitaka: If that plug-in works that would be really cool. Always good to find something that keeps you from having to re-invent the wheel :) – Nope Sep 08 '12 at 00:59

score 1 · Answer 2 · answered Sep 08 '12 at 00:32

1

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

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

answered Sep 08 '12 at 00:32

Derek Hunziker

12,996
4
57
105

score 1 · Accepted Answer · answered Sep 08 '12 at 00:36

1

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.

answered Sep 08 '12 at 00:36

Mark

5,680
2
25
26

Oleg · Answer 4 · 2012-09-08T00:33:11.087

Instead of removing the element on click, you want to fade the target element out and then remove the element. Note this cannot be accomplished by chaining remove after the desired animation.

If you chose to rely on old school setTimeout() you have to remember about correct variable scoping. Alternatively you could add a callback to be executed upon animation completion:

var $el = $(this).closest('li');    //no need to operate directly on img imo
$el.animate({
  opacity: 0    //plus any other animation you want... height:0, width:0, ...
}, 1000, function() {
  $el.remove();
});

Fiddled

score 0 · Answer 5 · answered Sep 08 '12 at 00:35

0

I think what you want is to...

$(element).css("visibility", "hidden");
$(element).animate({"width": 0}, "slow", function() {
  $(this).remove();
});

Here is the fiddle http://jsfiddle.net/MT5xS/4/

answered Sep 08 '12 at 00:35

Stuart Wakefield

6,294
24
35

score 0 · Answer 6 · answered Sep 08 '12 at 00:36

0

Try this it will slide up and then remove

$('.user-pic').live('click', function() {
  $(this).closest('li').slideUp('slow', function() {
    $(this).remove();
  });
});

answered Sep 08 '12 at 00:36

Iori

660
1
10
19

Animate/Slow down elements filling space left by removed element

6 Answers6

DEMO - Animate element removal