2

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

这就是我的代码的样子

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

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

4

3 回答 3

0

最后使用动画和前置播放位置。前置完成后，将值更改为默认值

$("#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'
    });        
});

在这里检查

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

于 2012-04-07T00:01:03.320 回答
0

我认为你可以使用：

  $('#smallpotletdiv').animate

您可以使用它的参数：例如

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

jQuery 动画

于 2012-04-06T20:52:20.070 回答
0

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

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

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

于 2015-07-10T06:43:08.770 回答