jquery动画

最新推荐文章于 2019-12-20 20:45:03 发布

birdlun

最新推荐文章于 2019-12-20 20:45:03 发布

阅读量102

点赞数

分类专栏： 05 jquery

本文链接：https://blog.csdn.net/Birdmotianlun/article/details/96930039

版权

05 jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

动画常用方法

show（）显示元素
hide（）隐藏元素
toggle（）切换（当元素显示就变成了隐藏，当元素隐藏就变成了显示）
slideDown（）展开
slideUp（）收缩
fadeIn（）淡入
fadeOut（）淡出

列：动画练习

		<style type="text/css">
			.box{
				width:200px;
				height: 300px;
				border:1px solid red;
				background-color: gold;
				display: none;
			}
		</style>
		<script type="text/javascript" src="js/jquery-2.0.2.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				
				//当点击时显示div
				$('#show').on('click',function(){
					$('.box').show(5000);
				})
				//当点击时，隐藏div
				$('#hidden').on('click',function(){
					$('.box').hide(5000);
				})
				
				//自动切换
				$('.box').toggle(function(){
					$(this).show(5000);
				},
				function(){
					$(this).hide(5000);
				}
				)
				//展开
				$('#bt1').on('click',function(){
					$('.box').slideDown(5000);
				})
				//收缩
				$('#bt2').on('click',function(){
					$('.box').slideUp(5000);
				})
				//淡入
				$('#bt3').on('click',function(){
					$('.box').fadeIn(5000);
				})
				//淡出
				$('#bt4').on('click',function(){
					$('.box').fadeOut(5000);
				})
			})
		</script>
	</head>
	<body>
		
		<button id="show">显示</button>
		<button id="hidden">隐藏</button>
		
		<button id="bt1">慢慢展开</button>
		<button id="bt2">慢慢收缩</button>
		
		<button id="bt3">淡入</button>
		<button id="bt4">淡出</button>
		
		<div class="box"></div>
	</body>
</html>

自定义动画

列：自定义动画

		<style>
			.box{
				position:absolute;
				width:100px;
				height: 100px;
				background-color: gold;
				top:50px;
				left:300px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-2.0.2.min.js" ></script>
		<script>
			$(function(){
				$('#bt1').click(function(){
					$('.box').animate({
						width:200,
						height:200
					},2000);
				})
				//移动到500,100
				$('#bt2').click(function(){
					$('.box').animate({
				        left:500,
						top:100
					},2000);
				})
				
				//移动到指定的距离100,50
				$('#bt3').click(function(){
					$('.box').animate({
				        left:'+=100',
						top:'+=50'
					},2000);
				})
				
				$('#bt4').click(function(){
					$('.box').stop();    //停止动画
				})
			})
			
		</script>
	</head>
	<body>
		<button id="bt1">慢慢扩大</button>
		<button id="bt2">移动到指定的位置</button>
		<button id="bt3">移动指定的距离</button>
		<button id="bt4">停止动画</button>
		
		<div class="box"></div>
	</body>
</html>

结果：