abstrakt：<!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>
<!--開始動(dòng)畫 animate()-->
<!--停止動(dòng)畫 stop()-->
<div class="box">
<button id="btn10">開始動(dòng)畫</button>
<button id="btn11">停止動(dòng)畫</button>
<div class="box1" id="box10"></div>
</div>
<div class="box">
<button id="btn12">循環(huán)動(dòng)畫</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)
})
//可排隊(duì) 動(dòng)畫隊(duì)列 依次執(zhí)行
$("#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規(guī)定是否清楚動(dòng)畫隊(duì)列，默認(rèn)false，僅停止活動(dòng)的動(dòng)畫，允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行
//goToEnd規(guī)定是否立即完成當(dāng)前動(dòng)畫
$("#btn11").click(function(){
$("#box10").stop(true,true)
})
//循環(huán)動(dòng)畫
//animate({params},speed,fn)
//必須參數(shù)params,定義形成動(dòng)畫的CSS屬性
//fn 動(dòng)畫完成后執(zhí)行的函數(shù)
$("#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>
Korrigierender Lehrer：韋小寶Korrekturzeit：2018-11-16 11:05:36
Zusammenfassung des Lehrers：寫的還算是完整！但是缺少總結(jié)以及代碼的高亮！下次記得不能少哦！