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

Question

我正在尝试创建自定义轮播。它的工作方式是元素包含在两个“堆”中，两个堆包含相同的元素。

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

点击“prev”按钮时需要执行反向动画。

将元素从第二堆移到第一堆时，需要用动画来实现。

我在这里创建了一个 fiddle https://jsfiddle.net/n109rpp0/3/使用到目前为止我制作的 HTML，但我正在努力寻找一种制作动画的方法。

我不确定我是否采取了正确的方法，例如通过将元素复制到两个 ul 元素中。另外，如何确保元素以正确的顺序循环？

有人对我应该如何处理这件事有任何想法吗？

Answer 1

这里是一个快速的想法，如何实现你想要的。添加这个:

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

到你的下一个按钮功能。

您需要玩转代码才能实现完美过渡。这是更新的 fiddle

Google animate function for jQuery，你会找到更多的例子