摘要：<!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 参数规定的时
停止动画
stop() 用于停止动画或者是效果
语法是
$(selector).stop(stopAll,goToEnd)
可选的参数 stopAll 规定是否应该清除动画
可选参数 goToEnd 规定是否立即完成当前动画
-->
<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>
批改老师：查无此人批改时间：2019-04-13 13:34:34
老师总结：完成的不错。jq的代码比js代码简单很少，至少英文少了很多，继续加油。
