摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>菜单栏移动</title> <script src="st
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单栏移动</title>
<script src="static/jquery-3.3.1.min.js"></script>
<style>
*{margin:0;padding:0;}
#box{width:500px;height:34px;background:#333;margin:100px auto;position:relative;}
a{text-decoration:none;color:white;font-size:14px;display:inline-block;
width:100px;height:30px;text-align:center;line-height:30px;}
#slideBlock{width:100px;height:4px;background:green;position:absolute;}
</style>
</head>
<body>
<div id="box">
<a href="#" name="0">首页</a>
<a href="#" name="1">产品列表</a>
<a href="#" name="2">关于我们</a>
<a href="#" name="3">联系我们</a>
<div id="slideBlock"></div>
</div>
<script>
$(function(){
$("a").mouseenter(function(){
var nameNum = $(this).attr("name");
$("#slideBlock").stop().animate({left:nameNum*100+"px"},500); //这句为什么要加stip()?
});
$("a").mouseleave(function(){
$("#slideBlock").animate({left:"0px"},500);
});
});
</script>
</body>
</html>
批改老师：查无此人批改时间：2019-04-03 13:29:31
老师总结：完成的不错。你的问题，英文是不是打错了？ stop方法，是停止动画。如果不加，动画会一直重复执行。 你去掉试试就知道了。
