Редирект после анимации

[Dionid]

Задача следующая:
После нажатия на одну из ссылок (3 ссылки, имеющие общий класс ".links" и каждая свой href) должна произойти анимация блока box (<div class="box">), а после должен произойти редирект на значение href ссылки, на которую был произведен клик. Сам box должен вернутся в прежнюю позицию.
Пока нашел способ прописать направление ссылки через атрибут value
Мой код примерно такой:
HTML

<ul>
	<li><a class="links" href="#" value="www/A.html">TEXT</a></li>
	<li><a class="links" href="#" value="www/A.html">TEXT</a></li>
	<li><a class="links" href="#">TEXT</a></li>
</ul>
<div class="box" id="box"></div>

JS

$('.links').click(function(){
    $('#box').animate({"left": "-10"},1000, function(){
      var n = document.getElementsByClassName('links');
      document.location = n.value
  })
    $('#box').animate({"left": "значение прежней позиции"}, 5000)
});

Проблемы:
1) Происходит анимация, а после происходит редирект на значение undefined (впринципе, я это ожидал). Значит, нужен способ получить ссылку через другой атрибут, но какой, если href переводит на другую страницу до окончания анимации?
2) Эта функция выводит атрибут всех ссылок, а в моем случае нужно лишь той, на которую был произведен клик
3) Нужно после завершения анимации вернуть box в обратную позицию. Возможно ли сделать это без добавления строчки $('#box').animate({"left": "значение прежней позиции"}, 5000)
P.S.
Я понимаю, что код некорректен и есть возможность реализовать это по-другому, но пока я не имею достаточных знаний в Js и Jq, а запросы в гугле не вывели нужного результата

[рони]

var n = document.getElementsByClassName('links');

долго смотрим на красную букву -- это для медитаци чего в супе нехватает.

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[Dionid]

Нашел частичный ответ:
1) Создаю функцию, которая производит анимацию, а далее переводит на определенную ссылку:

function animredic() {
  $('#box').animate({'left': '100px'},1000, function(){
    document.location="www/A.html";
    });
  };

2) После присвоил атрибуту href функцию:

<a class="links" href="JavaScript:animredic()">TEXT</a>

Результат:
Теперь при нажатии на ссылку происходит перехож на нужную страницу после анимации
Оставшиеся проблемы:
1)Вернуть box в исходную позицию (возврат должен проиходить, что бы при следующем попадании на страницу блок не оставался на месте, куда он переместился при первом использовании функции)(понимаю, что пишу слишком запутано)
2) Эта функция не универсальна: приходится каждой ссылке присваивать свое значение href и каждый раз прописывать новую функцию анимации и перехода

[рони]

Dionid, вернуть href
клик по ссылке -- отмена события event.preventDefault()-- var link = this ;сохранение самой ссылки для передачи
в callback анимации
function(){
document.location = link.href

}

[Dionid]

Премного благодарен.
Конечный код:
JS

$('.links').click(function(event){
      event = event || window.event 
      event.preventDefault ? event.preventDefault() : (event.returnValue=false);
      var link = this.href
      $('#box').animate({"left": "10"}, 1000, function(){
        document.location = link
      });
    });

HTML

<a class="links" href="www/A.thml">TEXT</a>

Осталась одна проблема: как вернуть блок обратно на место, поскольку при нажатии кнопки "назад", блок остается там, куда его перенесли, но, думаю, я сам с этим справлюсь

[рони]

Dionid,
вариант ...

$('.links').click(function(event){
      event.preventDefault();
      var link = this.href,box = $('#box'), left = box.css('left');
      box.animate({"left": "10"}, 1000, function(){
        box.css({left : left});
        document.location = link
      });
    });

[Dionid]

Еще раз благодарю. Собственно это тени, которые при открытии страницы уезжают налево, при переходе на другую наезжают на страницу. Вот как я реализовал:
HTML

<a class="links" href="www/A.html">TEXT</a>
<div class="box" id="box"></div>
<div class="boxret" id="boxret"></div>

CSS

.box {
	width: 100%;
	height: 110%;
	background-color: black;
	position: fixed;
	top: 0;
	right: -105%;
	-webkit-box-shadow: -50px 0px 105px 50px rgba(0, 0, 0, 1);
	-moz-box-shadow:    -50px 0px 105px 50px rgba(0, 0, 0, 1);
	box-shadow:         -50px 0px 105px 50px rgba(0, 0, 0, 1);
}

.boxret {
	width: 100%;
	height: 110%;
	background-color: black;
	position: fixed;
	top: 0;
	left: 0%;
	-webkit-box-shadow: 50px 0px 105px 50px rgba(0, 0, 0, 1);
	-moz-box-shadow:    50px 0px 105px 50px rgba(0, 0, 0, 1);
	box-shadow:         50px 0px 105px 50px rgba(0, 0, 0, 1);
}

JS

$('.links').click(function(event){
      event = event || window.event 
      event.preventDefault ? event.preventDefault() : (event.returnValue=false);
      var link = this.href
      $('#box').animate({"right": "0%"}, 1200, function(){
        document.location = link
      });
      $('#box').animate({"right": "-105%"}, 1200)
    });

    $(document).ready(function(){
      $('#boxret').animate({"left": "-105%"}, 1200)
    });