アニメーションのある親から別の親に要素を移動する

Question

私はカスタムカルーセルを作成しようとしています。それが動作する方法は、アイテムが2つの「パイル」に含まれており、両方のパイルに同じアイテムが含まれていることです。

「次へ」ボタンをクリックすると、2番目のファイルの最上位の項目が1番目のファイルの先頭に移動します。最初のファイルの最後の項目は2番目のファイルの最後に移動します。つまり、両方のファイルには常に同じ数の項目が含まれています。

"prev"ボタンをクリックすると、逆のアニメーションを実行する必要があります。

アイテムを2番目のファイルから最初のファイルに移動するときは、アニメーションを使用する必要があります。

私はこれまでに製作したHTMLを使ってここにフィダルを作成しましたが、私はアニメーションを行う方法を考え出すのに苦労しています。

私は適切なアプローチをとっているかどうかはわかりません。項目を2つの要素に複製することによって実現できます。また、アイテムが正しい順序で循環されるようにするにはどうすればよいですか？

私はこれについてどのようにすればいいのですか？

Answer 1

ここでは、あなたが望むものを達成する方法を簡単に説明します。これを追加する：

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

次のボタン機能に追加します。

完全な移行を行うには、コードを使用する必要があります。ここ は、GoogleがjQueryのための機能をアニメーション化し、あなたがより多くの例

があります

fiddleに更新されます