下划线跟随导航
<!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">社区问答</li>
<li id="3">编程词典</li>
<li id="4">手册下载</li>
<li id="5">工具下载</li>
<li id="6">菜鸟学堂</li>
</ul>
<div class="underline"></div>
</div>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script>
$(function(){ //文档就绪函数
// $('.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>
思路：先找到当前鼠标划过的li标签并且获取id，parseInt()方法转化为整数，每个li标签宽为100像素，parseInt()*100为下划线偏移值，下划线
设置为div而非li下边框，鼠标划过每个li时，使用stop()停止当前下划线移动动画，然后animate()定义下划线移动
总结：attr()返回或设置选中元素的自有属性值，stop()停止当前动画
$('.underline').stop().animate({left:$a+'px'},300) 先停止当前下划线动画，否则鼠标划过每个li时下划线会先回到首页后再移动到指定li
文档就绪函数 $(function(){}) $(document).ready(function(){})