abstrak：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<!-- 語法$(selector).animate({params},speed,fn)
必選參params 形成動畫的css屬性
可選的speed 參數(shù)規(guī)定的時
停止動畫
stop() 用于停止動畫或者是效果
語法是
$(selector).stop(stopAll,goToEnd)
可選的參數(shù) stopAll 規(guī)定是否應該清除動畫
可選參數(shù) goToEnd 規(guī)定是否立即完成當前動畫
-->
<button id="btn">按鈕</button>
<button id="reset">停止</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script type="text/javascript">
$('#btn').click(function(event){
$('#box').animate({'left':'500px'},3000);
});
$('#reset').click(function(){
$('#box').stop(true);
})
</script>
</body>
</html>
/////////////////
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="nav" style="margin: 100px auto; width:960px;">
<a class="active" href="#">首頁</a>
<a href="#">首頁1</a>
<a href="#">首頁2</a>
<a href="#">首頁3</a>
<a href="#">首頁4</a>
<div class="line"></div>
</div>
<style>
.nav{
position:relative;
}
.nav a{
padding:10px 20px;
border-bottom:solid 3px #fff;
text-decoration: none;
color:#666;
}
.nav a:hover{
color:#66f;
}
.nav .active, .nav .active:hover{
color:#f33;
}
.nav .line{
position:absolute;
border-top:solid 2px red;
width:0;
left:0;
top:0;
}
</style>
<script>
function navLine(o, bo)
{
var x = '' + (o.position().top + o.outerHeight() - 2) + 'px';
var y = '' + o.position().left + 'px';
var w = '' + o.outerWidth() + 'px';
var h = '2px';
$('.nav .line').stop();
if (bo)
{
$('.nav .line').css({width:w, height:h, top:x, left:y});
}
else
{
$('.nav .line').animate({width:w, height:h, top:x, left:y});
}
}
$(function(){
navLine($('.nav .active'), true);
$('.nav a').hover(function(){
navLine($(this));
}, function(){
navLine($('.nav .active'));
});
});
</script>
</body>
</html>
Guru membetulkan：查無此人Masa pembetulan：2019-04-13 13:34:34
Rumusan guru：完成的不錯。jq的代碼比js代碼簡單很少，至少英文少了很多，繼續(xù)加油。