サマリー：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq下劃線導航</title><script type="text/javascript" src="js/jq_3.3.1_mi.js">&l
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq下劃線導航</title>
<script type="text/javascript" src="js/jq_3.3.1_mi.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul {list-style: none;z-index:20;font-size: 14px;}
.menu{width: 600px;height: 40px;margin: 20px auto; text-align: center;background: #BA3032;box-shadow: 0 2px 10px #666;border-radius: 3px;position: relative;}
li{float: left;width: 120px;height: 40px;line-height: 40px;color: #fff;font-family: '微軟雅黑';list-style: none;}
a:link,a:visited,a:hover{color: #fff; text-decoration: none;width:120px;display: block;}
.line{width: 120px;height: 2px;background: #fff;position: absolute;bottom: 0px;z-index: 10px;}
</style>
<script type="text/javascript">
$(function(){
$('a').hover(//獲取a標簽，鼠標指針經(jīng)過時執(zhí)行以下函數(shù)
function(){
$x=parseInt($(this).attr('name'))*120//獲取當前a標簽的name的屬性
$('.line').stop().animate({left:$x+'px'},300)
},
function(){
$('.line').stop().animate({left:'0px'},300)//鼠標的初始化，當鼠標離開a的時候，下邊的線回到初始位置
}
)
})
</script>
</head>
<body>
<div>
<ul>
<li ><a href="#" name="0">首頁</a></li>
<li ><a href="#" name="1">學院簡介</a></li>
<li ><a href="#" name="2">部門概況</a></li>
<li ><a href="#" name="3">專業(yè)設置</a></li>
<li ><a href="#" name="4" >聯(lián)系我們</a></li>
</ul>
<div></div>
</div>
</body>
</html>
知識點總結(jié)：
用到兩個主要的函數(shù)parseInt() 和animate()
一、parseInt() 函數(shù)的作用：可解析一個字符串，并返回一個整數(shù)。parseInt的返回值只有兩種可能，不是一個十進制整數(shù)，就是NaN，本例中，用parseInt函數(shù)獲取a標簽的name屬性
二、animate()函數(shù)的作用：animate()方法執(zhí)行CSS屬性集的自定義動畫，該方法會將一個屬性在指定或者默認的時間內(nèi)從一個屬性值變化到另一個屬性值，由于屬性值是逐漸變化的，所以就形成了所謂的動畫效果。
animate()的語法：$(selector).animate(styles,speed,easing,callback)
1、styles用來設置對象屬性值的目標值，即需要將屬性值變成什么狀態(tài)或者大小。animate可以操作的屬性很多，但是它不能操作顏色，如對象背景顏色，字體顏色等，如果想要操作顏色，需要導入官方提供的js文件才可以。
2、speed就是速度，就是對象屬性值從當前的狀態(tài)轉(zhuǎn)換到你設置的另一個狀態(tài)的變化時間
3、easing是描述這個動畫設一個怎樣的運行過程，’linear’ 就是勻速的意思，即對象屬性值從當前值變化到另一個值在固定的時間內(nèi)是勻速變化的，而默認’swing’這個參數(shù)表示曲線形的運動模式，剛開始會慢慢運動，然后加速，最后減速。
4、callback是一個回調(diào)函數(shù)表示在動畫執(zhí)行完畢以后去調(diào)用的一個函數(shù)，用了這個回調(diào)函數(shù)，我們可以實現(xiàn)讓動畫往復運行，即在回調(diào)函數(shù)里面再把對象屬性值設置為初始狀態(tài)
添削の先生：天蓬老師添削時間：2019-02-02 11:50:53
先生のまとめ：這類簡單動畫, 有很多實現(xiàn)方式, jQuery封裝了這些操作, 讓這個操作更加的簡便