jq 操作动画

谁借莪１个温暖的怀抱￠ 2021-07-24 13:18 435阅读 0赞

链式调用.stop(true),可停止之前动画，加载当前动画
    动画可以链式调用
    
    **显示隐藏的的元素(逐渐显示,动态改变成设置的高和宽)**
    	通过hide()方法隐藏的或是在CSS里设置了display:none
    		数组对象.show()
    			$("#showdiv").show();
    		设置时间
    			$("#showdiv").show(3000);
    		设置回调方法
    		    $("#showdiv").show(3000,函数);     会等到显示结束时调用函数
    		    								若已经显示,则会立即指向函数
    		    									
    **隐藏显示的元素(逐渐淡出，动态减小高和宽至消失,消失过程其他元素会动态移动自己位置)**
    	可添加回调函数
    	对象数组.hide()
    	设置时间
    	对象数组.hide(3000);
    		$("#showdiv").hide(3000);
    
    
    **将隐藏可见元素隐藏，将不可见元素显示(相当于show()和hide()结合)**
    可添加回调函数
    	数组对象.toggle(时间)
    			function t2()
    		{
    			$("#showdiv,#div01").toggle(3000);
    			$("#showdiv,#div01").toggle(3000);
    		}
    
    
    **下滑高度变化(会将不可见显示为可见)**
    	可添加回调函数
    	$("#showdiv").slideDown(3000);  会逐渐从上到下变化到设置的高度，只改变高度，不改变宽度
    
    
    
    **上滑高度变化(会将不可见显示为可见)**
    	可添加回调函数
    	$("$showdiv").slideUp(2000);   高度会下到上减小，不会改变宽度
    
    **改变上滑下滑方向**
    	添加定位，设置bottom不设置top，则slideDown()变成从下到上加载，slideUp()变成从上到下消失
    
    
    **淡出淡入**
    	可添加回调函数
    	$("$showdiv").fadeOut(时间);  会逐渐淡出到不见
    	$("$showdiv").fadeIn(时间);   会逐渐淡入显示
    
    
    **可通过.的方式组合操作**
    	$("#end").hide().delay(8000).slideDown(2000);

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>jq 动画</title>
    		<script type="text/javascript" charset="uft-8" src="js/jquery-3.4.1.js"></script>
    		<script type="text/javascript">
    			
    			function t1()
    			{ 
    				$("#end").delay(12000).slideDown(2000);
    				$("#showdiv").show(3000);
    				$("#div01").hide(3000);
    				
    				$("#showdiv,#div01").toggle(3000);
    				
    				$("#showdiv").slideDown(3000);
    				$("#div01").slideUp(2000);
    				$("#showdiv").fadeOut(3000);
    		
    				$("#div02,#div03").toggle(3000);
    				$("#div02,#div03").toggle(3000);
    				$("#div02").slideDown(3000);
    				$("#div03").slideUp(2000);
    				$("#div02").fadeOut(3000);
    				
    				
    		
    				
    			}
    			
    			function t2()
    			{ 
    				$("#showdiv,#div01").toggle(3000);
    				$("#showdiv,#div01").toggle(3000);
    			}
    			function t3()
    			{ 
    				$("#end").hide(5000);
    				$("#end").slideDown(6000);
    			}
    			
    		</script>
    		
    		<style type="text/css">
    			#showdiv{ 
    				height:300px;
    				background-color:orange;
    				background-size:30% 100%;
    				background-repeat: no-repeat;
    				background-image: url(../css学习/img/钢铁侠4.jpg);
    				display:none;
    			}
    
    			#div01{ 
    				height:300px;
    				background-color:red;
    				background-size:30% 100%;
    				background-repeat: no-repeat;
    				background-image: url(../css学习/img/钢铁侠5.jpg);
    				
    			}
    			#end{ 
    				height:1030px;
    				width: 1920px;
    				background-image: url(../css学习/img/钢铁侠.jpg);
    				background-repeat: no-repeat;
    				background-size:1550px 720px;
    				display: none;
    			}
    						#div02{ 
    				height:300px;
    				background-color:blueviolet;
    				background-size:30% 100%;
    				background-repeat: no-repeat;
    				background-image: url(../css学习/img/蜘蛛侠.jpg);
    				display:none;
    				
    			}
    						#div03{ 
    				height:300px;
    				background-color:lightskyblue;
    				background-size:30% 100%;
    				background-repeat: no-repeat;
    				background-image: url(../css学习/img/黑豹.jpg);
    				
    			}
    
    		</style>
    	</head>
    	<body onload="t1()" >
    		<div id="showdiv">
    			
    			
    		</div>
    		
    		<div id="div01">
    			
    		</div>
    
    		<div id="div02">
    			
    		</div>
    		<div id="div03">
    			
    		</div>
    		<div id="end">
    			
    		</div>
    	</body>
    </html>