无法让这个 CSS/jQuery 下划线动画工作，我做错了什么？

Question

我正在尝试将这个很酷的滑动下划线动画集成到我的 Wordpress 导航标题中（Storefront 子主题，如果这很重要），但它没有正常运行（根本没有）。您可以在此处查看原始代码笔。

下面是我为我的网站调整代码的尝试。作者的 codepen 示例显示了鼠标单击时的动画，但我希望它显示出来hover。而且我只想要下划线动画，不关心链接的颜色变化，所以我尝试删除不必要的部分。

我已将我的 JS 文件放入 Wordpress 的functions.php 中。我很确定它加载了，我通过向alert确实弹出的 .js添加一个来测试它

当我的代码运行时，什么也没有发生。我在调试这个时遇到了麻烦，因为我有点被困在 Wordpress 沙箱中，并且对 WP 和 JS 都非常缺乏经验。我很有可能在 .js 的某个地方犯了一个非常基本的错误，我可能没有正确定位链接。也将感谢任何巧妙的方法来循环链接指向它们各自的moveToIndex号码的建议！

jQuery(function() {

  var currentIndex = 1;

  // Always moving to same item, just to test

  $(".menu a").hover(function() {

    moveToIndex(2);

  });

  function moveToIndex(idx) {

    if (idx === currentIndex)

      return;

    var fromTab = $(".menu li:nth-child(" + currentIndex + ")"),

      toTab = $(".menu li:nth-child(" + idx + ")"),

      underlineborder = $(".underlineborder"),

      animationDuration = 150;

    var fromLeft = 0,

      fromRight = 0,

      toLeft = toTab.offset().left - toTab.parent().offset().left,

      toRight = toTab.offset().left + $(toTab).width();

    if (fromTab.length > 0) {

      fromLeft = fromTab.offset().left - fromTab.parent().offset().left;

      fromRight = fromLeft + fromTab.width();

    }

    $(".menu a").removeClass("active");

    toTab.addClass("active");

    underlineborder.animate({

      left: currentIndex < idx ? fromLeft : toLeft,

      width: currentIndex < idx ? toRight - fromLeft : fromRight - toLeft

    }, animationDuration).animate({

      left: toLeft,

      width: toTab.width()

    }, animationDuration);

    currentIndex = idx;

  }

  // initialize tabs

  moveToIndex(1);

});

.menu li {

  cursor: pointer;

  display: inline-block;

  margin: 5px 7px 10px 7px;

  opacity: .65;

  transition: .3s transform;

}

.menu li.active {

  cursor: default;

  opacity: 1;

  text-shadow: 0 0 4px rgba(0, 0, 0, .8);

  transform: translateY(-3px);

}

.underlineborder {

  background: red;

  border-radius: 5px;

  cursor: default;

  position: absolute;

  height: 3px;

  width: 10px;

  margin: 0;

  opacity: 1;

  bottom: 0;

  left: 0;

}