摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script&g
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0}
.box{width: 100%;height: 40px;}
.nav{width: 80%;height: 40px;background-color: #666;margin:0 auto;}
a{text-decoration: none;color: red;}
ul{overflow: hidden;}
li{text-decoration: none;;list-style: none;float: left;height: 40px;line-height: 40px;text-align: center;cursor: pointer;width: 20%}
</style>
<script type="text/javascript">
$(function(){
$('ul>li').each(function(index,e){
$(this).hover(
function(){
var l=(parseInt(index))*($(this).css('width').substr(0,3));
$('.line').stop().animate({left:l+'px'},250);
// 鼠标放上去后有一个停止 停止后有个动画
},
function(){
$('.line').stop().animate({left:'0px'},250);
})
});
})
</script>
</head>
<body>
<div class="box">
<div class="nav">
<ul>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
</ul>
<div style="border-bottom: 5px solid red;width: 20%;position: relative;" class="line"></div>
<!-- 下划线定位 必须 不然偏移的left 不好写 -->
</div>
</div>
</body>
</html>
疑问 不理解
理论上应该是先有动画在去停止动画操作
$('.line').animate({left:l+'px'},250).stop();
为什么实际效果是先停止再有动画
$('.line').stop().animate({left:l+'px'},250);
另外:
stop()和animate() 为什么还能连着写? 不是应该分开来吗?
批改老师：韦小宝批改时间：2019-02-21 17:24:34
老师总结：从哪看出现停止再有动画的 ? 连着写也可以 分开写也没错 连着写更简洁一点 jQuery中有很多方法都是可以连在一起写的
