<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
$("#b3").click(function(){
$("#d").toggle();
});
$("#b4").click(function(){
$("#d").toggle(2000);
});
$("#b5").click(function(){
$("#d").slideUp();
});
$("#b6").click(function(){
$("#d").slideDown();
});
$("#b7").click(function(){
$("#d").slideToggle();
});
$("#b8").click(function(){
$("#d").slideToggle(2000);
});
$("#b9").click(function(){
$("#d").fadeOut();
});
$("#b10").click(function(){
$("#d").fadeIn();
});
$("#b11").click(function(){
$("#d").fadeToggle();
});
$("#b12").click(function(){
$("#d1").fadeTo("slow",0.2);
$("#d2").fadeTo("slow",0.5);
$("#b3").fadeTo("slow",0.8);
});
$("#b13").click(function(){
$("#d").animate({left:'100px'},2000);
$("#d").animate({left:'0px',top:'50px',height:'50px'},2000,function(){
alert("动画结束,THANKS");
});
});
});
</script>
<style type="text/css">
div{
border:1px solid lightgray;
background-color: pink;
width:400px;
height:200px;
position: relative;
}
.d{
width:100px;
height:100px;
}
</style>
<button id="b1">立即隐藏</button>
<button id="b2">立即显示</button>
<button id="b3">立即切换</button>
<button id="b4">延时切换(2s)</button><br><br>
<button id="b5">向上滑动</button>
<button id="b6">向下滑动</button>
<button id="b7">滑动切换</button>
<button id="b8">延时滑动切换(2s)</button><br><br>
<button id="b9">淡出</button>
<button id="b10">淡入</button>
<button id="b11">淡入淡出切换</button>
<button id="b12">指定淡入程度</button><br><br>
<button id="b13">自定义动画</button>
<div id="d" style="text-align: center">用于演示的div</div>
<div id="d1" class="d"></div>
<div id="d2" class="d"></div>
<div id="d3" class="d"></div>
</body>
</html>