Javascript 使用jquery制作活动类三角形幻灯片

我试图得到一个向下的箭头滑动到活动div，就像squarespace网站：

到目前为止，我已经使用css和jquery将箭头显示在活动的单击div上，但是我希望箭头滑动到活动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将arrow活动类添加到单击的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下放置了一个箭头框，然后使用.animate（）将箭头移动到相应的活动div下。最后很简单

你能给我一把小提琴吗？对不起，我本来应该这么做的，但我刚刚弄明白了。我在div下放置了一个箭头，然后使用.animate（）将箭头移动到相应的活动div下。

<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>