jq基础7——效果演示

约定不等于承诺〃 2022-01-17 00:17 254阅读 0赞

<!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(){ //0-1,浅到深
    				$("#d1").fadeTo("slow",0.2);
    				$("#d2").fadeTo("slow",0.5);
    				$("#b3").fadeTo("slow",0.8);
    			});
    
    			$("#b13").click(function(){ //向右移动100px，向左移动50px，高度变小
    				$("#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>