abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下劃線跟隨導(dǎo)航條</titl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下劃線跟隨導(dǎo)航條</title>
<style type="text/css">
*{padding: 0;margin: 0}
.cont{height: 600px;width: 40px; margin:0 auto;position: relative}
ul {
list-style: none;
font-size: 20px;
}
li{cursor: pointer;width: 100px;height: 40px;text-align: center;line-height: 40px;background-color: skyblue;box-shadow: 0px 2px 20px skyblue}
</style>
</head>
<body>
<div class="cont">
<ul>
<li name="0">html</li>
<li name="1">css</li>
<li name="2">javascript</li>
<li name="3">php</li>
<li name="4">mysql</li>
</ul>
<div class="xian" style="width:2px;height: 40px;background-color: orange;position: absolute;top:0px"></div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$("li").hover(function () {
$x = parseInt($(this).attr('name'))*40;
$('.xian').stop().animate({'top':$x+'px'},300);
},function () {
$('.xian').stop().animate({'top':'0px'},300);
})
})
</script>效果圖：
總結(jié)：為什么要先stop(); 因為hover離開的時候動畫效果會回到最開始，不stop的話會出現(xiàn)來回滑動。
Correcting teacher：滅絕師太Correction time：2019-03-18 09:26:10
Teacher's summary：為什么要用stop(),搞清楚stop()是什么意義就知道啦,完成的不錯!