Всем привет, подскажите пожалуйста, как сделать эффект "переезда" к нужному элементу в вертикальном меню? Сейчас на стадии изучения js и jq и пока не могу понять как сделать плавный переход анимации, подобный правому блоку в ВК в разделе "Диалоги"... Попробовал что то сделать, ниже приведу свой код, но так и не смог реализовать смену при клике и тем более понятия не имею, как сделать чтобы анимация шла именно от твоего элемента в том направлении котором надо, примерно понимаю как сделать от 1-ого элемента и идти до нужного, а потом останавливаться, а как сделать чтобы например из нижнего линия ехала вверх до нужного...
PS: Во вложенном изображении указано стрелкой на полоску, которая плавно перебегает на выбранный элемент этого блока, при этом в зависимости от того, сверху или снизу имеется активный блок, она не начинает с начала, а движется в нужном направлении к выбранному блоку... Помогите разобраться...
---------
Вот мой HTML
<div class = "col-xs-10 col-md-12">
<ul class="nav vl">
<li class="an ac_lt_nav"><a class="navigation_a" href="#">Блок 1</a></li>
<li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 2</a></li>
<li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 3</a></li>
<li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 4</a></li>
<li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 5</a></li>
<li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 6</a></li>
<li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 7</a></li>
</ul>
</div>
Вот CSS
|
Код:
|
.st_lt_nav
{
border-left: 4px solid #C0C0C0;
padding-left: 12px;
margin-left: -12px;
height: 30px;
}
.ac_lt_nav
{
border-left: 4px solid blue;
padding-left: 12px;
margin-left: -12px;
height: 30px;
} |
Вот JS под Jquery
$(document).ready(function(){
$('.an').click(function () {
let count= $('.an').length;
//alert(count);
if(!this.classList.contains('ac_lt_nav')){
$(this).removeClass("st_lt_nav");
$(this).toggleClass('ac_lt_nav');
}
else
{
$(this).removeClass("ac_lt_nav");
$(this).toggleClass('st_lt_nav');
}
});
});
Тут класс an используется как идентификатор нужной группы... Это один из последних мной нахимиченных скриптов, до этого еще по другому пробовал, всё не то... помогите плс.
