Сделать активный слайд треугольника класса с помощью jquery

Question

Я пытаюсь заставить стрелку вниз скользить к активному элементу div, как на сайте squarespace: http://www.squarespace.com/about/contact.

До сих пор я получал стрелку, которая появлялась на активном, нажал div отлично, используя css и jquery, однако я бы хотел, чтобы стрелка скользила к активному div, а не просто появлялась и исчезала, используя addClass и removeClass.

Любая помощь приветствуется!

CSS для активной стрелки:

  .arrow_box {
    position: relative;
    cursor: pointer;

}
.arrow_box.active:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0,0,0,0);
    border-top-color: #111;
    border-width: 30px;
    margin-left: -30px;
    z-index: 2000;

}

Jquery для добавления стрелки активного класса в нажатой div:

 $('#click').click(function(){
    $(".arrow_box").removeClass("active");
        $(this).toggleClass("active");

 $('#click2').click(function(){
    $(".arrow_box").removeClass("active");
        $(this).toggleClass("active");

 $('#click3').click(function(){
    $(".arrow_box").removeClass("active");
        $(this).toggleClass("active");

HTML:

<div  id="click" class="four columns arrow_box active">
    <h5 class="center whitetext thin">GENERAL</h5>

</div>
<div id="click2" class="four columns arrow_box">
    <h5 class="center whitetext thin">USERS</h5>

</div>
<div id="click3" class="four columns arrow_box">
    <h5 class="center whitetext thin">AGENTS</h5>

</div>

Я решил эту проблему, поместив один arrow_box под div, а затем использовал.animate(), чтобы переместить стрелку под соответствующий активный div. Просто в конце концов!