简单的动画操作

最新推荐文章于 2023-01-02 20:14:33 发布

Spirit书生

最新推荐文章于 2023-01-02 20:14:33 发布

阅读量419

点赞数 2

分类专栏： jQuery基础

本文链接：https://blog.csdn.net/BookstoreSpirit/article/details/102495396

版权

jQuery基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

1、隐藏与显示

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

1.1、隐藏

$("#btn").on('click',function(){
    $("#box").hide()
})

在这里插入图片描述

1.2、显示

$("#btn").on('click',function(){
    $("#box").show()
})

在这里插入图片描述

1.3、隐藏/显示

$("#btn").on('click',function(){
    $("#box").toggle()
})

在这里插入图片描述

2、上拉与下拉

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

2.1、上拉

$("#btn").on('click',function(){
    $("#box").slideUp()
})

在这里插入图片描述

2.2、下拉

$("#btn").on('click',function(){
    $("#box").slideDown()
})

在这里插入图片描述

2.3、上拉/下拉

$("#btn").on('click',function(){
    $("#box").slideToggle()
})

在这里插入图片描述

3、淡入与淡出

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

3.1、淡入

$("#btn").on('click',function(){
    $("#box").fadeIn(1000)
})

在这里插入图片描述

3.2、淡出

$("#btn").on('click',function(){
    $("#box").fadeOut(1000)
})

在这里插入图片描述

3.3、淡入/淡出

$("#btn").on('click',function(){
    $("#box").fadeToggle(1000)
})

在这里插入图片描述

指定透明度

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

$("#btn").on('click',function(){
    $("#box").fadeTo(1000,.5)
})

在这里插入图片描述

自定义动画

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

动画列队(第一个参数)：
false：不操作
true：清空
当前动画(第二个参数)：
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>

在这里插入图片描述