Question

使用jquery，css3，我想将div标签移动到另一个地方，但不是立即，我想为它设置动画。

假设我有这个

<div>
    <div class='item' style='float:left;'>1</div>
    <div class='item' style='float:left;'>2</div>
    <div class='item' style='float:left;'>3</div>
</div>

我想将第一个div项（具有innertext 1的项）移到底部，所以看起来像这样

<div>
    <div class='item' style='float:left;'>2</div>
    <div class='item' style='float:left;'>3</div>
    <div class='item' style='float:left;'>1</div>
</div>

我该怎么做？

由于

Answer 1

当移动元素会导致元素重排时，您必须放置虚拟元素来保存源和目标的尺寸。在您的情况下，您可以克隆第一个项目，将克隆设置为visiblility: hidden，然后克隆克隆并将其附加到第3个元素之后。然后制作第一个项目position: absolute，并将其左侧和顶部值从第一个虚拟位置的位置设置为第二个虚拟位置的位置。动画完成后，附加动画元素，删除其内嵌样式，并删除虚拟对象。有关类似的真实库的示例，请参阅jQuery Draggable / Droppable。

如何动画元素移动到DOM中的另一个位置？

1 个答案: