Задача следующая:
После нажатия на одну из ссылок (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, а запросы в гугле не вывели нужного результата