jQuery自定义动画

短命女 2022-12-03 13:27 142阅读 0赞

使用animate()来完成  
比如：  
1.逐渐扩大  
1）宽高都扩为200px  
2)宽先阔为200px,高后扩为200px  
2移动到指定位置  
1）移动到（500，100处）  
2）移动到（100，20处）  
3.移动指定距离  
1）移动距离为（100，50）  
2）移动距离为（-100，-20）  
4.停止动画：使用stop()来停止动画  
示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>自定义动画</title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#div1{
    				position: absolute;
    				width: 100px;
    				height: 100px;
    				top: 50px;
    				left: 300px;
    				background-color: #00FFFF;
    			}
    		</style>
    		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
    		<script type="text/javascript">
    			$(function(){
    				var $div1 = $("#div1");
    			
    			$("#btn1").click(function(){
    				//1.1
    //				$div1.animate({
    //					
    //					width:200, 
    //					height:200
    //				},2000);
    				//1.2
    				$div1.animate({
    					width:200,
    				}).animate({
    					height:200,
    				});
    			});
    			$("#btn2").click(function(){
    				//2.1
    //				$div1.animate({
    //					left:500,
    //					top:100,
    //				});
    				//2.2
    				$div1.animate({
    					left:100,
    					top:20,
    				},1000);
    			});
    			$("#btn3").click(function(){
    				//3.1
    //				$div1.animate({
    //					left:"+=100",
    //					top:"+=50"
    //				});
    				//3.2
    				$div1.animate({
    					left:"-=100",
    					top:"-=50",
    				});
    			});
    			$("#btn4").click(function(){
    				$div1.stop();
    			});
    			});
    			
    		</script>
    	</head>
    	<body>
    		<button id="btn1">逐渐扩大</button>
    		<button id="btn2">移动到指定位置</button>
    		<button id="btn3">移动指定距离</button>
    		<button id="btn4">停止动画</button>
    		<div id="div1">热爱可抵岁月漫长</div>
    	</body>
    </html>