Javascript-форум - Как сделать вертикальное меню с анимацией?

Всем привет, подскажите пожалуйста, как сделать эффект "переезда" к нужному элементу в вертикальном меню? Сейчас на стадии изучения 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 используется как идентификатор нужной группы... Это один из последних мной нахимиченных скриптов, до этого еще по другому пробовал, всё не то... помогите плс.