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

Задача следующая:
После нажатия на одну из ссылок (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.getElementByClassName('links');
      document.location = n.value
  })
    $('#box').animate({"left": "значение прежней позиции"}, 5000)
});

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

Премного благодарен пользователю рони.
Конечный код:
JS

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

HTML

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