Анимированное смещение элемента по событию

[Johnjs]

Всем добрый вечер! Только начал изучать jQuery. Прошу помощи в следующем. Есть несколько флагов, расположеных по дуге. Слева и справа дуги - стрелки. Соответсвенно, при нажатии на левую стелку флаги должны анимироваться на одну позицию влево, при нажатии правой стрелки - соответсвенно вправо. При смещении влево справа появляется его копия и наоборот.
Я так понял, алгоритм будет следующим.
1. Вычисляем координаты флагов использую .position().
2. При клике стреки меняю позицию с одной в другую, использую .animate(position).
3. Если флаг выходит за пределы координат, то используешь клон флага (т.е сместил все, один не поместился, клоню в переменную, удаляю текущую, на свободное место вывожу клон флага и меняю позицию.
Правильно ли я построил алгоритм? Если да, помогите с реалиацией, так как практика программирования на JS отсутсвует.
Если нет, помогите построить правильный алгоритм и реализовать его на практике.
Заранее спасибо!
Вот мой HTML+CSS:

<div class="slider">
                <div class="arrow left"></div>
                <div class="slides">
                    <div id="de"><a href=""><img src="pictures/Flags/Germany.png" alt="Немецкий"><span>Немецкий</span></a></div>
                    <div id="es"><a href=""><img src="pictures/Flags/Spain.png" alt="Испанский"><span>Испанский</span></a></div>
                    <div id="it"><a href=""><img src="pictures/Flags/Italy.png" alt="Итальянский"><span>Итальянский</span></a></div>
                    <div id="en"><a href=""><img src="pictures/Flags/UK.png" alt="Английский"><span>Английский</span></a></div>
                    <div id="fr"><a href=""><img src="pictures/Flags/France.png" alt="Французский"><span>Французский</span></a></div>
                    <div id="nl"><a href=""><img src="pictures/Flags/Netherlans.png" alt="Голландский"><span>Голландский</span></a></div>
                </div>
                <div class="arrow right"></div>
        </div>

.slider { position: absolute; top: 135px; left: 150px; }
.slider > div { display:inline-block; }
.slides { width:550px; height:53px; position:relative; font-size:70%; }
.arrow { width: 16px; height: 15px; background: url(pictures/arrowsSprite.png) no-repeat;}
.arrow.left  { background-position: -16px 0; }
.left:hover { background-position: 0 0; }
.arrow.right { background-position: -32px 0; }
.right:hover { background-position: -48px 0 }
.slides > div span { min-width:50px; position:absolute; display:inline-block; top:25px; left:15px; text-align:center; }
 
#de, #es, #it,
#en, #fr, #nl { position: absolute; color: #0094d9; }
#de { top: 10px; }
#es { top: 2px; left: 90px; }
#it { left: 180px; }
#en { left: 280px; }
#fr { top: 2px; left: 373px; }
#nl { top: 10px; left: 463px; }

[danik.js]

На css3 transitions:

<iframe width="100%" height="300" src="http://jsfiddle.net/danya_postfactum/uL94vgqa/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Сделал наспех.

[Johnjs]

Спасибо большое! В коде мне нужно использовать функцию .animate(). Можете помочь в этом?

[danik.js]

мне нужно использовать функцию .animate()

А по-моему не нужно )
transition не умеют только старые браузеры. Но даже в них все будет работать, только без анимации ) По-моему это хороший вариант.

[danik.js]

Причем можно, запросто сделать скрипт без использования jQuery. Хотя если в проекте используются другие скрипты, требующие jQuery, то это мало смысла имеет.

[Johnjs]

Скрипт хорош, я и не спорю. Но у меня в задании требование использовать .animate()