javascript - jQuery - 如何使出现/消失文本的侧边导航更流畅？

Question

我有一个包含四个点的侧边导航。当您将鼠标悬停在其中一个点上时，文本会出现在每个点的旁边。如果您在点之间移动鼠标，文本会在 View 中闪烁。有没有办法添加某种功能，以便如果用户在 1.5 秒内没有将鼠标悬停在其中一个点上，那么文本将隐藏？

代码片段:

function setNav(line,text) {
      $(text).hide();
      $(line).hover(
      function () {
        $(text).fadeIn(250);
      },
      function () {
        $(text).fadeOut(250);
      })
    }

    setNav(".lineDot", ".lineText");

.dot {
      color: #000;
      display: inline;
      transition: all 0.3s ease;
    }

    .dot:hover {
      transform-origin: right;
      transform: scale(1.5);
    }

    .dots {
      position: fixed;
      right: 15px;
      text-align: right;
    }

    .lineDot {
      text-decoration: none;
      color: #000;
      display: inline;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<div class="dots">
    <a href="" class="lineDot" id="d1"><p id="d1text" class="lineText" style="display: inline;">Home </p><i class="dot fas fa-circle"></i></a>
    <br>
    <br>
    <a href="" class="lineDot" id="d2"><p id="d2text" class="lineText" style="display: inline;">About </p><i class="dot fas fa-circle"></i></a>
    <br>
    <br>
    <a href="" class="lineDot" id="d3"><p id="d3text" class="lineText" style="display: inline;">Projects </p><i class="dot fas fa-circle"></i></a>
    <br>
    <br>
    <a href="" class="lineDot" id="d4"><p id="d4text" class="lineText" style="display: inline;">Contact </p><i class="dot fas fa-circle"></i></a>
    <br>
  </div>

提前感谢您的宝贵时间和帮助。

Answer 1

如何更改这行代码？

setNav(".lineDot", ".lineText");

还有这个吗？

setNav(".dots", ".lineText");

这不会使点闪烁，因为它是包含立即显示的文本的元素。