Как на JQuery сделать плавную анимацию и сортировку?

Question

[masq]

Имеется такой список, всего элементов изначально 6 плюс 1 скрытый (small main).
Изначально пункты меню содержат картинки, после нажатия на один из них картинки остается только в нем.

<ul class="navigation">
			<li class="small main" data-number="1"><a href="#"><span class="yellow"></span></a></li>
			<li class="medium" data-number="2"><a class="active" href="#"><img src="images/menu/1.png" alt=""><span class="red"></span></a></li>
			<li class="big" data-number="3"><a class="active" href="#"><img src="images/menu/2.png" alt=""><span class="blue"></span></a></li>
			<li class="small" data-number="4"><a class="active" href="#"><img src="images/menu/3.png" alt=""><span class="orange"></span></a></li>
			<li class="small" data-number="5"><a class="active"  href="#"><img src="images/menu/4.png" alt=""><span class="cayn"></span></a></li>
			<li class="big" data-number="6"><a class="active" href="#"><img src="images/menu/5.png" alt=""><span class="green"></span></a></li>
			<li class="medium" data-number="7"><a class="active" href="#"><img src="images/menu/6.png" alt=""><span class="violet"></span></a></li>
		</ul>

При нажатии на один из элементов нужно переместить его влево, а все остальные справа (1 активный пункт меню и остальная навигация)

jQuery(document).ready(function($){
			var navWidth=$('.navigation').width();
			var menu=$('.navigation li').clone();
			$('.navigation li').click(function(){
				$('.navigation li a').removeClass('active');
				$('.main').css('display','block');
				$('.navigation').prepend($(this));
				var currClass=$(this).attr('class');
				var newWidth=(navWidth-($(this).width()+60))/2;
				$('.navigation li').css({'width':newWidth,"margin-bottom":"25px"});
				$(this).children('a').addClass('active');
			});
			$('.main').click(function(){
				$('.navigation li a').addClass('active');
				$('.main').css('display','none');
				$('navigation').html(menu);	
			});
		});

Пытался сделать таким образом, но после нескольких нажатий пункты съезжают, имеют ширину отличную от начальной и т.д.

Вопрос 1: Как получить ширину у элемента после изменения его класса, а потом применить новую для всех элементов, не касаясь его?

Вопрос 2: Как сделать плавное перемещение остальных блоков на правую сторону?

Вопрос 3: Как отсортировать li после многочисленных кликов, чтобы вернуть начальное состояние?

Comments

[masq]

Вопрос №1 решен.

Answer 1

[Юрий Лобанов]

Плавное перемещение через css3, а остальное:
при клике на любой пункт этому пункту присваиваете класс active. И родителю (div class navigation) присваиваете active.
Для детей дива с классом navigation active margin-left ставите больше, чем он был у детей дива с классом navigation, а для элемента с классом active меньше.
Соответственно, для возврата в начальное состояние убираете все классы active у элементов, что-нить типа $('.active').each($(this).removeClass('active'))
Ну и соответственно делаете все что хотите, помимо margin можно и картинки скрывать и расцвечивать как хотите.
Не хочется писать за Вас, задача в общем-то тривиальная.

Comments

[masq]

То, что Вы написали, уже было реализовано, проблема была в другом. В сортировке элементов списка по data-id например. Плавное перемещение через CSS3 не подходит.