动画 div 从一个地方移动到另一个地方答案

【问题标题】：animate div moving from one place to another动画 div 从一个地方移动到另一个地方
【发布时间】：2012-04-06 20:47:53
【问题描述】：

我正在设计一个 Potal 框架，我在主 div 中有多个 portlet(div)。当我移动一个 div 时，我希望它移动到页面顶部并垂直扩展。 所有这些都有效，但是，我想为移动部分设置动画。

这就是我的代码的样子

$('#smallpotletdiv').prependTo($('#maindiv'));

对动画有更多了解的人会提出什么建议？如何显示 div 从其当前位置移动并将其自身附加到新位置？

【问题讨论】：

它是这样的：dropthings.omaralzabir.com 每个窗口都有自己的应用程序。如果您在单击小部件上“编辑”按钮旁边的箭头时注意到此人也在向上移动 div

标签： jquery html jquery-animate

【解决方案1】：

最后使用 animate 和 prepend 来处理位置。前置完成后，将值更改为默认值

$("#smallpotletdiv").animate({
      top: 300,
      left: 500     
}).prependTo($("#maindiv")).css({
      top: 'auto',
      left: 'auto'
});

更新：

你的工作代码看起来像这样

current.animate({
  top: -30,
  left: -20     
}, 2000, function() {
    current.prependTo(prependToDiv).css({
       top: 'auto',
       left: 'auto'
    });        
});

Check Here

他们执行的问题在于，您没有将元素定位为可通过左侧和顶部移动。为此，元素必须绝对定位，即position: absolute。

【讨论】：

这不起作用，我在屏幕上看不到任何效果。我不知道我做错了什么。（感谢您的回复）
@VijayV，你有我可以玩的演示吗？
好的，让我看看能不能给你一个精简的工作演示。
给你。请让我知道这是否有效：[link]jsfiddle.net/4Bgx7/368
@Stax - 我的问题还算顺利吗？

【解决方案2】：

我认为你可以使用：

  $('#smallpotletdiv').animate

你可以使用它的参数：for ex

width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'

JQuery animate

【讨论】：

感谢您的快速响应，但不应该将动画添加到 prependTo 调用中吗？我很困惑对不起。
是的..它应该添加到 prependTo call
好的，我不知道我做错了什么，我按照 jQuery 网站上的示例进行操作。 .prependTo('#mainDiv').animate({ width: '100%'},{ queue: false, duration: 3000 });它不工作。我想更大的问题是，我不知道什么样的效果会让这个动作看起来不错
完全正确..由您选择

【解决方案3】：

实现这一点的一个很酷的工具是一个名为 react-magic-move 的 ReactJS 工具 https://www.npmjs.com/package/react-magic-move

这有可能操纵 DOM 以平稳地更改元素的位置。然而，它并不容易实现，因为它不受支持并且使用过时的 ReactJS 版本。

在此处查看演示： https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424

【讨论】：