摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{padding: 0;margin: 0;} .tab_bar{height:40px;width: 7
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{padding: 0;margin: 0;}
.tab_bar{height:40px;width: 700px;margin: 30px auto;position: relative;}
ul li{float: left;height: 40px; width: 100px;background: #000000;color: #FFFFFF;list-style: none;line-height: 40px;text-align: center;cursor: pointer;}
.underline{height: 2px;width: 100px;background:greenyellow;position: absolute;top: 38px;}
</style>
<body>
<div class="tab_bar">
<ul>
<li id="0">首頁</li>
<li id="1">視頻教程</li>
<li id="2">社區(qū)問答</li>
<li id="3">編程詞典</li>
<li id="4">手冊下載</li>
<li id="5">工具下載</li>
<li id="6">菜鳥學(xué)堂</li>
</ul>
<div class="underline"></div>
</div>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script>
$(function(){ //文檔就緒函數(shù)
// $('.underline').hide()
$('li').hover(function(){
$a = parseInt($(this).attr('id'))*100
$('.underline').stop().animate({left:$a+'px'},300)
// $('.underline').show().stop().animate({left:$a+'px'},300)
},function(){
$('.underline').stop().animate({left:'0px'},300)
// $('.underline').stop().hide()
}
)
})
</script>
</body>
</html>
思路：先找到當(dāng)前鼠標(biāo)劃過的li標(biāo)簽并且獲取id，parseInt()方法轉(zhuǎn)化為整數(shù)，每個li標(biāo)簽寬為100像素，parseInt()*100為下劃線偏移值，下劃線
設(shè)置為div而非li下邊框，鼠標(biāo)劃過每個li時，使用stop()停止當(dāng)前下劃線移動動畫，然后animate()定義下劃線移動
總結(jié)：attr()返回或設(shè)置選中元素的自有屬性值，stop()停止當(dāng)前動畫
$('.underline').stop().animate({left:$a+'px'},300) 先停止當(dāng)前下劃線動畫，否則鼠標(biāo)劃過每個li時下劃線會先回到首頁后再移動到指定li