abstrait：<!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() 為什么還能連著寫? 不是應該分開來嗎?
Professeur correcteur：韋小寶Temps de correction：2019-02-21 17:24:34
Résumé du professeur：從哪看出現(xiàn)停止再有動畫的 ? 連著寫也可以 分開寫也沒錯 連著寫更簡潔一點 jQuery中有很多方法都是可以連在一起寫的