Javascript 使用动画将元素从一个父元素移动到另一个父元素

我正在尝试创建一个自定义旋转木马。其工作方式是将项目包含在两个“桩”中，两个桩包含相同的项目

单击“下一步”按钮时，第二堆中最上面的项目将移动到第一堆的顶部。第一堆中的最后一个项目将移动到第二堆的底部，这意味着两堆中始终包含相同数量的项目

单击“prev”按钮时，需要执行反向动画

当将项目从第二堆移动到第一堆时，这需要通过动画实现

我在这里用迄今为止我制作的HTML创建了一个提琴，但我正在努力找到一种制作动画的方法

我不确定我是否采取了正确的方法，例如将项目复制到两个

ul

元素中。另外，我如何确保项目以正确的顺序循环

---

有人对我应该如何做有什么想法吗？

这里有一个快速的想法，如何实现你想要的。添加以下内容：

$(prevItem).animate({left: '-345px', top: '-30px', width: '+=50px', height: '+=50px'});
    $(prevItem).css('zIndex', '1');

下一步按钮功能

您需要使用代码来实现完美的转换。 以下是最新的

Google为jQuery提供动画功能，你会发现更多的例子