jQuery动画下划线跟导航走总结
通过该实例的学习让我对jQuery动画有了更新的认识，感觉老是讲的这个下划线跟着导航走有点麻烦，我自己用添加类和删除类做了一个下划线跟着导航走的实例，实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下划线跟着导航走</title>
<link rel="shortcut iocn" type="image/x-icon" href="../picture/mi.png">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
.menu{width: 450px;height: 44px;margin: 0px auto;margin-top: 20px;background-color: #ccc;}
.oneMenu li{float: left;width: 100px;height: 40px;line-height: 40px;text-align: center;/*border-bottom: 4px solid pink;*/list-style: none;margin: 0px auto;cursor: pointer;}
.bt{border-bottom: 4px solid pink;}
</style>
</head>
<body>
<!-- 导航条menu -->
<div>
<ul>
<li>首页</li>
<li>视频</li>
<li>新闻</li>
<li>体育</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
// 鼠标移上出现下划线
$('.oneMenu>li').mousemove(function(){
$(this).addClass('bt');
})
// 鼠标离开下划线消失
$('.oneMenu>li').mouseleave(function(){
$(this).removeClass('bt')
})
})
</script>
</body>
</html>