jquery怎么实现鼠标悬停导航下划线滑出效果

在网页设计中，常见的导航条都会有一些效果来增强用户的体验。其中最常见的一种效果就是鼠标悬停的导航下划线滑出效果。这种效果可以让用户更清晰、明确地知道自己所处于哪个导航选项上，进一步提升了用户体验。jquery是前端开发常用的框架，它可以帮助我们快速实现这一效果。在这里，我们就来详细讲述下jquery如何实现鼠标悬停导航下划线滑出效果。

一、HTML结构

在实现这个效果前，我们先来安排一下HTML的结构，将导航栏的每一项都用li标签写成一个列表。如下所示：

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

二、CSS样式

然后我们需要对导航条进行一定的样式设定。可以设置每一个li标签的宽度、高度、背景等等。可以根据实际设计需求进行设定。在这里，我们将导航条的下划线颜色设定成红色，并隐藏在导航栏下面。

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  position: relative;
  margin: 0 20px;
}

.nav li a {
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.nav li:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: red;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.nav li:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

三、jquery实现

在CSS中，我们已经设置好了导航栏下划线的颜色、宽度和隐藏方式。现在我们需要使用jquery来动态控制导航条的下划线滑出效果。

1. 首先，我们在文件头部引入jquery库。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. 然后，我们使用jquery的hover()函数来实现效果。

$("li").hover(
  //当鼠标进入时，添加hover类名
  function () {
    $(this).addClass("hover");
  },
  //当鼠标离开时，删除hover类名
  function () {
    $(this).removeClass("hover");
  }
);

3. 我们使用jquery的offset()函数和width()函数计算出当前鼠标所在的导航栏项的起始位置和长度，然后将这个长度值和起始位置在CSS中进行设定，在hover类名下设置下划线的宽度和位置，实现下划线滑出效果。

$("li").hover(
  function () {
    //获取当前元素的位置和宽度
    var left = $(this).offset().left;
    var width = $(this).width();
    //设置下划线宽度和位置
    $(".underline").css({
      "width": width + "px",
      "left": left + "px"
    });
    //在当前元素上添加hover类名
    $(this).addClass("hover");
  },
  function () {
    //移除元素上的hover类名
    $(this).removeClass("hover");
  }
);

四、完整代码

HTML结构：

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
<div class="underline"></div>

CSS样式：

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  position: relative;
  margin: 0 20px;
}

.nav li a {
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.nav li:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: red;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.nav li.hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.underline {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  background-color: red;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

jquery实现：

$(document).ready(function () {
  $("li").hover(
    function () {
      //获取当前元素的位置和宽度
      var left = $(this).offset().left;
      var width = $(this).width();
      //设置下划线宽度和位置
      $(".underline").css({
        "width": width + "px",
        "left": left + "px"
      });
      //在当前元素上添加hover类名
      $(this).addClass("hover");
    },
    function () {
      //移除元素上的hover类名
      $(this).removeClass("hover");
    }
  );
});

五、总结

通过上面的演示可以看到，实现鼠标悬停导航下划线滑出效果的方法非常简单，只需要使用jquery的hover()函数和offset()函数、width()函数来动态计算设置下划线的宽度和位置即可。这种效果能够加强网页的用户体验，使用户更加清晰地知道所处的导航选项，可以帮助你的网站更加地流行和受欢迎。