abstract：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .box{height:200px;height: 150px;float: left;margin:20px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{height:200px;height: 150px;float: left;margin:20px;}
.box1{height: 100px;width: 100px;background: red;}
</style>
<body>
<!--隐藏 hide()-->
<div class="box">
<button id="btn1">隐藏</button>
<div class="box1" id="box1"></div>
</div>
<!--显示 show()-->
<div class="box">
<button id="btn2">显示</button>
<div class="box1" id="box2"></div>
</div>
<!--上滑 slideUp()-->
<div class="box">
<button id="btn3">上滑</button>
<div class="box1" id="box3"></div>
</div>
<!--下滑 slideDown()-->
<div class="box">
<button id="btn4">下滑</button>
<div class="box1" id="box4"></div>
</div>
<!--上滑下滑切换 slideToggle()-->
<div class="box">
<button id="btn5">上滑下滑切换</button>
<div class="box1" id="box5"></div>
</div>
<!--淡入 fadeIn()-->
<div class="box">
<button id="btn6">淡入</button>
<div class="box1" id="box6"></div>
</div>
<!--淡出 fadeOut()-->
<div class="box">
<button id="btn7">淡出</button>
<div class="box1" id="box7"></div>
</div>
<!--淡入淡出切换 fadeToggle()-->
<div class="box">
<button id="btn8">淡入淡出切换</button>
<div class="box1" id="box8"></div>
</div>
<!--改变至给定透明度 fadeTo()-->
<div class="box">
<button id="btn9">改变至给定透明度</button>
<div class="box1" id="box9"></div>
</div>
<!--开始动画 animate()-->
<!--停止动画 stop()-->
<div class="box">
<button id="btn10">开始动画</button>
<button id="btn11">停止动画</button>
<div class="box1" id="box10"></div>
</div>
<div class="box">
<button id="btn12">循环动画</button>
<div class="box1" id="box11"></div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box1").hide(1000)
})
$("#box2").hide()
$("#btn2").click(function(){
$("#box2").show(1000)
})
$("#btn3").click(function(){
$("#box3").slideUp(1000)
})
$("#box4").hide()
$("#btn4").click(function(){
$("#box4").slideDown(1000)
})
$("#btn5").click(function(){
$("#box5").slideToggle(1000)
})
$("#box6").hide()
$("#btn6").click(function(){
$("#box6").fadeIn(1000)
})
$("#btn7").click(function(){
$("#box7").fadeOut(1000)
})
$("#btn8").click(function(){
$("#box8").fadeToggle(1000)
})
$("#btn9").click(function(){
$("#box9").fadeTo(1000,0.2)
})
//可排队 动画队列 依次执行
$("#btn10").click(function(){
$("#box10").css("background","blue").animate({height:"200px"},1000)
$("#box10").animate({width:"200px"},1000)
$("#box10").animate({height:"100px"},1000)
$("#box10").animate({width:"100px"},1000)
})
//stop(stopAll,goToEnd)
//stopAll规定是否清楚动画队列，默认false，仅停止活动的动画，允许任何排入队列的动画向后执行
//goToEnd规定是否立即完成当前动画
$("#btn11").click(function(){
$("#box10").stop(true,true)
})
//循环动画
//animate({params},speed,fn)
//必须参数params,定义形成动画的CSS属性
//fn 动画完成后执行的函数
$("#btn12").click(function(){
function start(){
$("#box11").animate({height:"200px"},500)
$("#box11").animate({width:"200px"},500)
$("#box11").animate({height:"100px"},500)
$("#box11").animate({width:"100px"},500,start)
}
start();
})
})
</script>
</html>
Correcting teacher：韦小宝Correction time：2018-11-16 11:05:36
Teacher's summary：写的还算是完整！但是缺少总结以及代码的高亮！下次记得不能少哦！