详解jQuery动画

最新推荐文章于 2022-07-15 11:24:41 发布

原创最新推荐文章于 2022-07-15 11:24:41 发布 · 269 阅读

CC 4.0 BY-SA版权

文章标签：

jQuery动画分为内置动画和自定义动画
内置动画： 显示show()、隐藏hide()、显示隐藏切换toggle()、上拉slideUp()、下拉slideDown()、上拉下拉切换slideToggle()、淡入fadeIn()、淡出fadeOut、淡入淡出切换fadeToggle()、透明度fadeTo()
自定义动画: animate()

内置动画

1.显示show()、隐藏hide()、显示隐藏切换toggle()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示隐藏</title>
		<style type="text/css">
			#box{width: 100px;height: 100px;background-color: red;position: absolute;}
		</style>
	</head>
	<body>
		<input type="button" id="btn1" value="隐藏" />
	    <input type="button" id="btn2" value="显示" />
	    <input type="button" id="btn3" value="隐藏/显示" />
	    <div id="box"></div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		//隐藏
		$("#btn1").click(function(){
	        $("#box").hide(200,"linear",function(){
	            alert("动画结束了")
	        });
	    })
		//显示
		$("#btn2").click(function(){
			$("#box").show(300);
		});
		//显示隐藏切换
		$("#btn3").click(function(){
			$("#box").toggle();
		});
	</script>
</html>

hide(参数1，参数2，参数3)
show(参数1，参数2，参数3)
toggle(参数1，参数2，参数3)
参数1(可选)：毫秒数；参数2(可选)：运动类型；参数3(可选)：回调函数

2.上拉slideUp()、下拉slideDown()、上拉下拉切换slideToggle()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上拉下拉</title>
		<style type="text/css">
			#box{width: 100px;height: 100px;background-color: red;position: absolute;}
		</style>
	</head>
	<body>
		<input type="button" id="btn4" value="上拉" />
	    <input type="button" id="btn5" value="下拉" />
	    <input type="button" id="btn6" value="上拉/下拉" />
	    <div id="box"></div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
			//上拉
		$("#btn4").click(function(){
			$("#box").slideUp(300,"linear",function(){
	            alert("动画结束了")
	        });
		});
		//下拉
		$("#btn5").click(function(){
			$("#box").slideDown(300);
		});
		//上拉下拉切换
		$("#btn6").click(function(){
			$("#box").slideToggle();
		});
	</script>
</html>

slideUp(参数1，参数2，参数3)
slideDown(参数1，参数2，参数3)
slideToggle(参数1，参数2，参数3)
参数1(可选)：毫秒数；参数2(可选)：运动类型；参数3(可选)：回调函数

3.淡入fadeIn()、淡出fadeOut、淡入淡出切换fadeToggle()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淡入淡出</title>
		<style type="text/css">
			#box{width: 100px;height: 100px;background-color: red;position: absolute;}
		</style>
	</head>
	<body>
		<input type="button" id="btn7" value="淡入" />
	    <input type="button" id="btn8" value="淡出" />
	    <input type="button" id="btn9" value="淡入/淡出" />
	    <div id="box"></div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		//淡入
		$("#btn7").click(function(){
			$("#box").fadeIn(300);
		});
		//淡出
		$("#btn8").click(function(){
			$("#box").fadeOut(300,"linear",function(){
	            alert("动画结束了")
	        });
		});
		//淡入淡出切换
		$("#btn9").click(function(){
			$("#box").fadeToggle();
		});
	</script>
</html>

fadeIn(参数1，参数2，参数3)
fadeOut(参数1，参数2，参数3)
fadeToggle(参数1，参数2，参数3)
参数1(可选)：毫秒数；参数2(可选)：运动类型；参数3(可选)：回调函数

4.透明度fadeTo()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>透明度</title>
		<style type="text/css">
			#box{width: 100px;height: 100px;background-color: red;position: absolute;}
		</style>
	</head>
	<body>
		<input type="button" id="btn10" value="有点透明">
		<div id="box"></div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		//透明度
		$("#btn10").click(function(){
			$("#box").fadeTo(1000,0.3);
		});
	</script>
</html>

fadeTo(参数1，参数2，参数3，参数4)
参数1：毫秒；参数2：透明度；参数3(可选)：运动类型；参数4(可选)：回调函数。

自定义动画

1.自定义动画animate()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义动画</title>
		<style type="text/css">
			#box1{width: 100px;height: 100px;background-color: red;position: absolute;}
		</style>
	</head>
	<body>
		<input type="button" id="btn1" value="自定义动画">
		<div id="box1"></div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		//自定义动画
		$("#btn1").click(function(){
			$("#box1").animate({
				width:0,
				height:0,
				top:330,
				left:210
			},3000,function(){console.log("动画结束")});
		});	
		</script>
</html>

animate(参数1，参数2，参数3，参数4)
参数1：对象,设置属性与属性值；参数2（可选）：毫秒；参数3（可选）：运动类型；参数4（可选）：回调函数

2.自定义动画连缀效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义动画连缀</title>
		<style type="text/css">
			#box2{width: 100px;height: 100px;background-color: blue;position: absolute;}
		</style>
	</head>
	<body>
		<input type="button" id="btn2" value="自定义动画连缀">
		<div id="box2"></div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		//自定义动画连缀效果
		$("#btn2").click(function(){
			$("#box2").animate({
				width:200,
				height:200
			}).animate({
				left:400,
				top:300
			},2000);
		});
		</script>
</html>