jq animate动画

矫情吗；* 2021-07-25 00:25 485阅读 0赞

animate
    	$('选择器').animate({json类型到终点的几何位置/几何大小},毫秒数)
    		
    		多个变化一起执行
    			$(".div1").animate({"width":100,'top':400,'left':400},4000);
    		
    		链式调用，执行完一个变化后再执行另一个变化
    				$(".div1").animate({'width':100},2000).animate({'top':400},2000).animate({'left':100},2000)
    			
    	动画不能变化的属性
    		背景颜色、background-position
    	
    	可以添加回调函数,在动画执行完毕后执行,链式调用中分别添加，则会在各自加载结束后执行
    		
    		$(".div1").animate({'width':100},2000,function(){console.log(1)}).animate({'top':400},2000,function(){console.log(22)}).animate({'left':100},2000,function(){
    			console.log("动画执行完毕");
    		})
    	
    	运动速度
    		linear:线性运动(匀速)
    		swing:中间快两边慢(默认)
    			
    			$(".div2").animate({'left':200,'top':10,'width':300},4000,'linear');

代码示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			.div1{ 
    				width: 200px;
    				height: 200px;
    				background-color: orange;
    				position: absolute;
    				top: 20px;
    				left:20px;
    				margin:20px;
    			}
    			
    			.div2{ 
    				width:200px;
    				height: 200px;
    				background-color: deepskyblue;
    				
    				position: absolute;
    				top: 240px;
    				left:20px;
    			}
    		</style>
    		<script src="js/jquery-3.4.1.js"></script>
    	</head>
    	<body>
    		<button>点我</button>
    		<div class="div1">
    			
    		</div>
    		<div class="div2">
    			
    		</div>
    		
    		<script>
    			
    			$("button").click(function(){ 
    				
    // $(".div1").animate({"width":100,'top':400,'left':400},4000);
    				
    				$(".div1").animate({ 'width':100},2000,function(){ console.log(1)}).animate({ 'top':400},2000,function(){ console.log(22)}).animate({ 'left':100},2000,function(){ 
    					console.log("动画执行完毕");
    				})
    				
    				$(".div2").animate({ 'left':200,'top':10,'width':300},4000,'linear');
    			})
    // $(".div1").animate({"width":100,'top':400,'left':400},4000);
    			
    			
    			
    		</script>
    	</body>
    </html>