用動畫將元素從一個父元素移到另一個元素

Question

我正在嘗試創建一個自定義輪播。它的工作方式是將物品包含在兩個「樁」中，兩個樁都包含相同的物品。

當你點擊「下一步」按鈕時，第二堆的最頂端的項目移動到第一堆的頂部。第一堆中的最後一項將移動到第二堆的底部，這意味着兩堆總是包含相同數量的物品。

當點擊「prev」按鈕時，它需要執行反向動畫。

將物品從第二堆移到第一堆時，這需要在動畫中發生。

我在這裏用我製作的HTML在這裏創建了一個小提琴https://jsfiddle.net/n109rpp0/3/，但我正在努力找出一種方法來做動畫。

我不確定我是否採取了正確的方法，例如，通過讓項目在兩個ul元素中重複。另外我如何確保物品按照正確的順序循環使用？

有沒有人有任何想法我應該如何去做呢？

Answer 1

這裏是一個快速的想法如何實現你想要的。加入此項：

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

到您的下一個按鈕功能。

您需要使用代碼進行完美的轉換。 這裏是一個更新fiddle

谷歌動畫功能jQuery和你會發現更多的例子