动画：将元素从一个位置移动到另一个位置

Question

我正在尝试制作一个很好的视觉效果，以便用户可以实际看到元素已添加到等待列表中。

从iMovie等多款应用中的可爱苹果操作系统特效中移出，当您将图库与视频历史记录交换时，我试图用div元素做一个简单的移动......但事实证明这有点困难。

问题将是，有没有人知道任何图书馆做更简单/更好的方式相同？

我可以在5分钟内完成什么是这样的：

http://jsbin.com/efihax

编辑链接：http://jsbin.com/efihax/edit

我的想法是如此顺利收缩.hero-unit股利和使它像它已被添加到等待名单

在这第一个5分钟后，我可以看到，如果我开始编写一个无尽的animate调用...这不是一个好的做法。

有没有其他办法？ 思考CCS3过渡/动画，但我不是很熟悉与它仍然不知道我怎么能做到这一点...

的图像显示什么，我试图与animate

完成

Answer 1

与您的代码的一些问题：

• 的fadeOut回调将一次被淡出每个元素调用。如果您放弃回调，则代码运行可能会更加顺利，而当动画定时结束时，将代码设置为仅开始执行其余代码一次。

• 当您启动动画，你设置position: absolute，但你的尺寸和元件的位置仍从其DOM位置得来，所以，一旦你开始动画这些属性，它会跳。

  在超时，请尝试将启动属性：

  orig 
      .css({ 
       'position':'absolute', 
       'width':orig.width(), 
       'height':orig.height(), 
       'left':orig.position().left, 
       'top':orig.position().top 
      }); 
  
      orig.empty(); 
  

• 你的元素目前出现的.waitList .label因为它margin的下方，它似乎不是因为它的padding的1x1的像素值。尝试使用这些动画。

My edit of your code

更新

我意识到，复合样式不动画效果非常好。为了获得平稳过渡，您希望分别为margin-top和margin-bottom制作动画，而不仅仅是margin，并且与所有四个padding属性相同。

My updated code

Answer 2

问题是您不要为容器设置动画。只需将动画元素更改为“容器”，该项目就会完全消失。解决它一段时间，它会工作。