JQuery动画效果

最新推荐文章于 2024-02-18 13:54:44 发布

wuke666666

最新推荐文章于 2024-02-18 13:54:44 发布

阅读量115

点赞数

文章标签： jQuery动画效果

本文链接：https://blog.csdn.net/wuke666666/article/details/88916367

版权

显示隐藏的元素 : 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: 300px;
				height: 300px;
				background: seagreen;
			}
		</style>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					$("div").fadeIn(1000);
				});
				$("#btn2").click(function(){
					$("div").fadeOut(1000);
				});
				$("#btn3").click(function(){
					$("div").fadeTo(1000,0.5);
				});
				$("#btn4").click(function(){
					$("div").fadeToggle("slow","linear");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="淡入" />
		<input type="button" id="btn2" value="淡出" />
		<input type="button" id="btn3" value="淡入透明度为0.5" />
		<input type="button" id="btn4" value="切换" />
		<div></div>
	</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