简单的动画操作

太过爱你忘了你带给我的痛 2023-06-06 10:38 23阅读 0赞

在日常编程中，会用到很多的动画效果的设置，这时候可以使用很多方法来完成，例如源生js，jQuery或者插件都可以完成，在自己完成代码编写的时候，源生js用起来有时候会感觉特别繁琐，但是使用jQuery就会非常的简便，这里就介绍几种jQuery简单的动画效果的设置。

##### 1、隐藏与显示 #####

隐藏：.hide()  
显示：.show()  
显示/隐藏：.toggle()

> 1.1、隐藏
> 
>     $("#btn").on('click',function(){
>         $("#box").hide()
>     })
> 
> ![在这里插入图片描述][20191011102511979.gif]

> 1.2、显示
> 
>     $("#btn").on('click',function(){
>         $("#box").show()
>     })
> 
> ![在这里插入图片描述][20191011102808413.gif]

> 1.3、隐藏/显示
> 
>     $("#btn").on('click',function(){
>         $("#box").toggle()
>     })
> 
> ![在这里插入图片描述][20191011102951814.gif]

##### 2、上拉与下拉 #####

上拉：.slideUp()  
下拉：.slideDown()  
上拉/下拉：.slideToggle()

> 2.1、上拉
> 
>     $("#btn").on('click',function(){
>         $("#box").slideUp()
>     })
> 
> ![在这里插入图片描述][201910111031042.gif]

> 2.2、下拉
> 
>     $("#btn").on('click',function(){
>         $("#box").slideDown()
>     })
> 
> ![在这里插入图片描述][20191011103234549.gif]

> 2.3、上拉/下拉
> 
>     $("#btn").on('click',function(){
>         $("#box").slideToggle()
>     })
> 
> ![在这里插入图片描述][20191011103327868.gif]

##### 3、淡入与淡出 #####

淡入：.fadeIn(动画时间)  
淡出：.fadeOut(动画时间)  
淡入/淡出：.fadeToggle(动画时间)

> 3.1、淡入
> 
>     $("#btn").on('click',function(){
>         $("#box").fadeIn(1000)
>     })
> 
> ![在这里插入图片描述][20191011103535898.gif]

> 3.2、淡出
> 
>     $("#btn").on('click',function(){
>         $("#box").fadeOut(1000)
>     })
> 
> ![在这里插入图片描述][20191011103611235.gif]

> 3.3、淡入/淡出
> 
>     $("#btn").on('click',function(){
>         $("#box").fadeToggle(1000)
>     })
> 
> ![在这里插入图片描述][20191011103701635.gif]

##### 指定透明度 #####

.fadeTo(时间【毫秒】，透明度)

>     $("#btn").on('click',function(){
>         $("#box").fadeTo(1000,.5)
>     })
> 
> ![在这里插入图片描述][20191011104245495.gif]

##### 自定义动画 #####

.animate(\{属性:目标\},function()\{目标完成后执行\})  
清除定时器：.stop()【**每个动画后都需要清除一次定时器**】  
stop有两个参数，默认情况下为false

1.  动画列队(第一个参数)：  
    false：不操作  
    true：清空
2.  当前动画(第二个参数)：  
    false：立即停止  
    true：立即到终点

> 例：百叶窗
> 
>     <style type="text/css">
>     			* {
>     				margin: 0;
>     				padding: 0;
>     			}
>     
>     			#box {
>     				border: 1px solid red;
>     				width: 602px;
>     				height: 202px;
>     				overflow: hidden;
>     			}
>     
>     			.sbox {
>     				height: 200px;
>     				width: 150px;
>     				float: left;
>     			}
>     </style>
>     
>     <body>
>     	<div id="box">
>     		<div class="sbox" style="background: yellow;"></div>
>     		<div class="sbox" style="background: blue;"></div>
>     		<div class="sbox" style="background: orange;"></div>
>     		<div class="sbox" style="background: pink;"></div>
>     	</div>
>     </body>
>     
>     <script type="text/javascript">
>     	$(".sbox").hover(function() {
>     		$(this).stop().animate({
>     			width: 300
>     		}).siblings().stop().animate({
>     			width: 100
>     		});
>     	},function(){
>     		$(".sbox").stop().animate({width:150})
>     	})
>     </script>
> 
> ![在这里插入图片描述][20191011104343300.gif]
> 
> ###### 如果不加stop()来清空定时器的话，当鼠标滑过次数不止一次时，会记录动画触发了多少次，然后依次执行，所以当鼠标离开后，当前动作结束后并不会结束动画，而是继续执行，会发生如下结果： ######
> 
> ![在这里插入图片描述][20191011104644750.gif]

[20191011102511979.gif]: /images/20230601/48ad28b390494e9e9da8886838c86b2b.png
[20191011102808413.gif]: /images/20230601/b749c7abb6614c3eb73515874990ffd9.png
[20191011102951814.gif]: /images/20230601/cd1226e547b04c3fa23ee6ac156688e8.png
[201910111031042.gif]: /images/20230601/c3a6827e88334cff945b27471729b07f.png
[20191011103234549.gif]: /images/20230601/ea2c0f7aab29439b84212c19cc0373dc.png
[20191011103327868.gif]: /images/20230601/8d4b88847b67432280b27091f9c951bc.png
[20191011103535898.gif]: /images/20230601/d974368deb7e45dabfe1d5bf6feeaeb3.png
[20191011103611235.gif]: /images/20230601/0bba1df95c7a40aa90db4c5e096b9b2f.png
[20191011103701635.gif]: /images/20230601/12c9739a5df64370ba3302340185a4aa.png
[20191011104245495.gif]: /images/20230601/e202dd805ead4c8f964a7336d9ed527f.png
[20191011104343300.gif]: /images/20230601/1b9f8737b45b4b8a805c548f66c0e3ec.png
[20191011104644750.gif]: /images/20230601/fee2d1f33a3846e7a1473bc0b5d781c3.png