<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$("#p1").fadeIn("slow");
});//以slow的速度淡出#p1
$("#but2").click(function(){
$("#p2").fadeOut("slow");
});//以slow的速度淡入#p2
$("#but3").click(function(){
$("#p1").fadeTo("slow", 0.33);
});//以slow的速度淡出#p1，并透明化0.33
$("#but4").click(function(){
$("#p2").fadeToggle("slow");
}); //以slow的速度自动切换淡出淡入#p2
$("#but5").click(function(){
$("#p4").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
},10000);
});//自定义动画
$("#but6").click(function(){
$("#p4").finish();
});//结束动画
$("#but7").click(function(){
$('#p2').fadeOut(300).delay(800).fadeIn(400);
}); //以300毫秒淡入#p2，间隔800毫秒以400毫秒淡出#p2
});
</script>
</head>
<style>
</style>
<body>
<input id="but1" type="button" value="淡出">
<input id="but2" type="button" value="淡入">
<input id="but3" type="button" value="淡出透明化">
<input id="but4" type="button" value="自动淡出淡入">
<input id="but5" type="button" value="动画，改变属性">
<input id="but6" type="button" value="结束动画">
<input id="but7" type="button" value="间隔执行">
<p id="p1" style="display:none;">显示隐藏的元素</p>
<p id="p2">隐藏元素</p>
<p id="p3">自动切换显示或隐藏</p>
<p id="p4" style="background:#98bf21;height:100px;width:100px;position:absolute;"></p>
</body>
</html>
