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

Question

我正在尝试将这个很酷的滑动下划线动画集成到我的 Wordpress 导航标题(Storefront 子主题，如果这很重要)中，但它没有正常运行(根本)。可以看原codepen here.

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

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

当我的代码运行时没有任何反应。我在调试时遇到了麻烦，因为我有点被困在 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="primary-navigation">
  <ul id="menu-main-navigation" class="menu nav-menu">

    <li id="menu-item-428" class="main-nav-item-1 ...">
      <a href="https://link-1.com">Link-1</a></li>

    <li id="menu-item-344" class="main-nav-item-2 ...">
      <a href="https://link-2.com">Link-2</a></li>

    <li id="menu-item-228" class="main-nav-item-3 ...">
      <a href="https://link-3.com">Link-3</a></li>
  </ul>
</div>

Answer 1

您缺少一个边框线 ( <li class="underline-border"></li> )。你已经有了一个风格。所以我添加了li。除此之外，我做了hover函数动态所以取其li悬停得到边界。你总是路过2而不是悬停索引。

$(".nav-menu a").hover(function() {
    var index = $(".menu").children().index($(this).parent());
    moveToIndex(index+1);
});

请参阅下面的代码段:

jQuery(function() {
  var currentIndex = 0;

  // Always moving to same item, just to test
  $(".nav-menu a").hover(function() {
    var index = $(".menu").children().index($(this).parent());
    moveToIndex(index+1);
  });

  function moveToIndex(idx) {
    if (idx === currentIndex)
      return;

    var fromTab = $(".menu li:nth-child(" + currentIndex + ")"),
      toTab = $(".menu li:nth-child(" + idx + ")"),
      underlineborder = $(".underline-border"),
      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 li").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);
});

ul{
  position:relative;
}
.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);
}

.menu li.underline-border {
  background: red;
  border-radius: 5px;
  cursor: default;
  position: absolute;
  height: 3px;
  width: 10px;
  margin: 0;
  opacity: 1;
  bottom: 0;
  left: 0;
  transform: translateY(0px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="primary-navigation">
  <ul id="menu-main-navigation" class="menu nav-menu">

    <li id="menu-item-428" class="main-nav-item-1">
      <a href="https://link-1.com">Link-1</a></li>

    <li id="menu-item-344" class="main-nav-item-2">
      <a href="https://link-2.com">Link-2</a></li>

    <li id="menu-item-228" class="main-nav-item-3">
      <a href="https://link-3.com">Link-3</a></li>
      
    <li class="underline-border"></li>
  </ul>
</div>

尽情享受吧!