Removing an element leads to wrong animations

[Guilherme Simoes]

Not sure if this is a bug or if the library is not supposed to cover this specific use case but when I remove an element, this is what happens:

1. All elements immediately jump back to the space available.
2. Next, magicMove seems to kick in and animates the elements forward.
3. Finally, the elements snap back to the correct position.

I'll make it clearer with this video.

[Daiwei Lu]

It's working with these code

$('.containers').magicMove({easing: 'ease', duration: 1000}, function() {
  $(this).children(':eq(2)').remove();
});

BTW, what is $0 referring to?

[Guilherme Simoes]

In the chrome console, $0 is the last selected element. Maybe I should have made that clearer. In this case, the selected element is the top right box, with the number 7.

But you are right, that code works. I guess I understand now. You can't remove a child element directly, you have to call remove on the children of the container, to which magicMove is applied.

Thanks.

[Guilherme Simoes]

Hm, I encountered another problem but I don't want to open another issue for nothing. I can't wrap the animated container in a div. Here's a demo where I'm using the exact same code of the official demo except there is a div containing everything.

I think this is because magicMove creates a clone of the animated container, but if the styles applied to the container depend on its parent, then those same styles aren't applied to the clone (which is appended to the body). Maybe this limitation would be worth adding to the readme.

[Daiwei Lu]

Try this one http://jsfiddle.net/TK3tw/2/.

Just remove the .foo from css. What happened here is MagicMove will clone .container and append it to body then do the calculation. After the cloned .container appended to body there is no .foo above it. So you have to apply styles directly to .container.