<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/lib/jquery2.2.4/jquery-2.2.4.min.js"></script>
<style>
#box{
width:400px;
height:400px;
background: #0c79be;
}
</style>
</head>
<body>
<button id="btn1">显示--动画效果</button>
<button id="btn2">隐藏--动画效果</button>
<button id="btn3">显隐--动画效果</button>
<button id="btn4">卷帘拉开--动画效果</button>
<button id="btn5">卷帘收起--动画效果</button>
<button id="btn6">卷帘拉开/收起--动画效果</button>
<button id="btn7">透明显示--动画效果</button>
<button id="btn8">透明隐藏--动画效果</button>
<button id="btn9">透明显示/隐藏--动画效果</button>
<button id="btn10">透明指定透明度--动画效果</button>
<button id="btn11">自定义动画[常用]</button>
<div id="box"></div>
<script>
$(function(){
//给按钮绑定单击事件，测试各种动画效果：熟悉API文档
//API：application program interface 应用程序开发接口 文档
$("#btn1").click(function(){
$("#box").show(2000);//show("fast"/"slow"/1000)
});
$("#btn2").click(function(){
$("#box").hide(2000);//show("fast"/"slow"/1000)
});
$("#btn3").click(function(){
$("#box").toggle(2000);//show("fast"/"slow"/1000)
});
$("#btn4").click(function(){
$("#box").slideDown(2000);//show("fast"/"slow"/1000)
});
$("#btn5").click(function(){
$("#box").slideUp(2000);//show("fast"/"slow"/1000)
});
$("#btn6").click(function(){
$("#box").slideToggle(2000);//show("fast"/"slow"/1000)
});
$("#btn7").click(function(){
$("#box").fadeIn(2000);//show("fast"/"slow"/1000)
});
$("#btn8").click(function(){
$("#box").fadeOut(2000);//show("fast"/"slow"/1000)
});
$("#btn9").click(function(){
$("#box").fadeToggle(2000);//show("fast"/"slow"/1000)
});
$("#btn10").click(function(){
$("box").fadeTo(2000,0.5);//show("fast"/"slow"/1000)
});
$("#btn11").click(function(){
$("#box").animate({
"margin-left":"500px",
"margin-top":"50px",
"width":"1000px",
"height":"100px"
},2000).animate({
"margin-left": "0px",
"margin-top": "10px",
"width": "100px",
"height": "200px"
},1000).animate({
"margin-left": "60px",
"margin-top": "110px",
"width": "10px",
"height": "20px"
},1000).animate({
"margin-left": "0px",
"margin-top": "0px",
"width": "400px",
"height": "200px"
},1000);
});
});
</script>
</body>
</html>
网友评论