jq animate动画

最新推荐文章于 2023-12-18 10:35:42 发布

神奇大叔

最新推荐文章于 2023-12-18 10:35:42 发布

阅读量687

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103512581

版权

jQuery 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

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>