时间戳

首页 > 解决方案 > jQuery - 如何使出现/消失的文本更平滑的侧面导航？

javascript - jQuery - 如何使出现/消失的文本更平滑的侧面导航？

问题描述

我有一个包含四个点的侧导航。当您将鼠标悬停在其中一个点上时，文本会出现在每个点旁边。如果您在点之间移动鼠标，则文本会在视图中闪烁。有没有办法添加某种功能，所以如果用户在 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>

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

标签： javascriptjqueryhtmlcss

解决方案

改变这行代码怎么样？

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

有了这个另一个？

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

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

推荐阅读