前端JQuery-动画效果学习(一)

最新推荐文章于 2024-03-15 17:18:21 发布

zxh...

最新推荐文章于 2024-03-15 17:18:21 发布

阅读量569

点赞数 1

分类专栏： web前端 HTML

本文链接：https://blog.csdn.net/weixin_43437202/article/details/88899643

版权

web前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML

20 篇文章 0 订阅

订阅专栏

显示隐藏的元素 : show(speed,easing,fn)；
隐藏显示的元素 : hide(speed,easing,fn)；
切换隐藏显示效果：toggle(speed,easing,fn)；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<input type="button" id="inp1"  value="隐藏"/>
		<input type="button" id="inp2" value="显示"/>
		<input type="button" id="inp3" value="切换"/>
		<div></div>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#inp1").click(function(){
					$("div").hide(1000);
				})
				$("#inp2").click(function(){
					$("div").show(1000);
				})
				$("#inp3").click(function(){
					$("div").toggle(1000);
				})
			});
		</script>
	</body>
</html>

向下展开显示元素：slideDown(speed,easing,fn)；
向上收缩隐藏元素：slideUP(speed,easing,fn)；
切换展开收缩效果：slideToggle(speed,easing,fn)；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<input type="button" id="inp1"  value="展开"/>
		<input type="button" id="inp2" value="收缩"/>
		<input type="button" id="inp3" value="切换"/>
		<div></div>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#inp1").click(function(){
					$("div").slideDown(1000);
				})
				$("#inp2").click(function(){
					$("div").slideUp(1000);
				})
				$("#inp3").click(function(){
					$("div").slideToggle(1000);
				})
			});
		</script>
	</body>
</html>

元素淡入显示：fadeIn(speed,easing,fn)；
元素淡出隐藏：fadeOut(speed,easing,fn)；
元素的透明度调整到指定值：fadeTo(speed,easing,fn)；
切换元素淡出淡入效果：fadeToggle(speed,easing,fn)；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<input type="button" id="inp1"  value="淡入"/>
		<input type="button" id="inp2" value="淡出"/>
		<input type="button" id="inp3" value="淡入透明度为0.5"/>
		<input type="button" id="inp4" value="切换"/>
		<div></div>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#inp1").click(function(){
					$("div").fadeIn(1000);
				});
				$("#inp2").click(function(){
					$("div").fadeOut(1000);
				});
				$("#inp3").click(function(){
					$("div").fadeTo(1000,0.5);
				});
				$("#inp4").click(function(){
					$("div").fadeToggle("slow");
				});
			});
		</script>
	</body>
</html>

自定义动画效果：animate(params,[speed],[easing],[fn])；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 150px;
				height: 150px;
				position: relative;
				left: 700px;
				top: 300px;
			}
			.right{
				transform: rotateZ(90deg);
			}
			.down{
				transform: rotateZ(180deg);
			}
		</style>
	</head>
	<body>
		<img src="img/gotop.gif"/>	
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("img").click(function(){
					$(this).delay(1000).fadeOut(1000);
					$(this).css({"top":0,"left":0}).addClass("right").hide();
					$(this).delay(1000).fadeIn(1000).animate({"left":"1300px"},5000);		
				});
			});
		</script>
	</body>
</html>

上述参数解释：
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
params:一组包含作为动画属性和终值的样式属性和及其值的集合

动画停止：stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

动画延迟：delay(duration,[queueName])
duration:延时时间，单位：毫秒
queueName:队列名词，默认是Fx，动画队列。

完成动画：finish( [queue ] )
queue：停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

执行一个禁用的动画：jQuery.fx.off
把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)
当把这个属性设成false之后，可以重新开启所有动画。

设置动画的显示帧速： jQuery.fx.interval

zxh...

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端JQuery-动画效果学习(一)

显示隐藏的元素 : show(speed,easing,fn)；隐藏显示的元素 : hide(speed,easing,fn)；切换隐藏显示效果：toggle(speed,easing,fn)；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></...
复制链接

扫一扫