JQuery第六章动画

最新推荐文章于 2022-10-03 14:24:45 发布

LW0512

最新推荐文章于 2022-10-03 14:24:45 发布

阅读量109

点赞数

分类专栏： jq 文章标签： jquery

本文链接：https://blog.csdn.net/LW0512/article/details/108919824

版权

jq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

动画

显示隐藏

show(秒数)		显示
hide(秒数)		隐藏
toggle()		切换显示/隐藏

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button>显示</button>
		<button>隐藏</button>
		<button>显示隐藏</button>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
//		$('button').eq(1).click(function(){
//			$('div').hide(300)//方法里面添加时间参数 毫秒
//		})
//		$('button').eq(0).click(function(){
//			$('div').show(1000)
//		})
//		$('button').eq(2).click(function(){
//			$('div').toggle(1000)
//		})

//		$('button').eq(2).click(function(){
//			$('div').toggle(1000,function(){
//				alert('哈哈哈哈')
//			})
//		})
	</script>
</html>

slideUp()		上隐藏
slideDown()		下显示
slideToggle()	上下切换

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button>上显示</button>
		<button>下隐藏</button>
		<button>显示隐藏</button>
	</body>
	<script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('button').eq(1).click(function(){
			$('div').slideUp(300)//方法里面添加时间参数 毫秒
		})
		$('button').eq(0).click(function(){
			$('div').slideDown(1000)
		})
//		$('button').eq(2).click(function(){
//			$('div').slideToggle(1000)
//		})
	</script>
</html>

fadeIn()		淡入
fadeOut()		淡出
fadeToggle()	切换淡入淡出
fadeTo(秒数，透明度)

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button>淡出</button>
		<button>淡入</button>
		<button>淡出淡入</button>
		<button>透明度</button>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
//		$('button').eq(1).click(function(){
//			$('div').fadeIn(1300)//方法里面添加时间参数 毫秒
//		})
//		$('button').eq(0).click(function(){
//			$('div').fadeOut(1000)
//		})
//		$('button').eq(2).click(function(){
//			$('div').fadeToggle(1000)
//		})
		$('button').eq(3).click(function(){
			$('div').fadeTo(1000,.2)
		})
	</script>
</html>

animate()		自定义动画
动画当中想要改变颜色（字体/背景），需要下载js/jquery.color.js这个插件

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: red;
				color: #fff;
				position: absolute;
				top:100px;
			}
		</style>
	</head>
	<body>
		<div>哈哈哈</div>
		<button>点击</button>
	</body>
	<!--<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>-->
	<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.color.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('button').click(function(){
			$('div').animate({
				width:'300px',
				height:'300px',
				'top':'300px',
				'left':'300px',
				'color':'yellow',
				'backgroundColor':'blue',
				'font-size':'50px'
			},2000)
		})
	</script>
</html>

stop()			停止  (只能停止当前的列队动画)  true、false
delay()			延迟

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: red;
				color: #fff;
				position: absolute;
				top:100px;
			}
		</style>
	</head>
	<body>
		<div>哈哈哈</div>
		<button>点击</button>
		<button>停止</button>
	</body>
	<!--<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>-->
	<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.color.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
//		$('button').eq(0).click(function(){
//			$('div').animate({'width':'300px'},1000)
//					.animate({'height':'500px'},2000)
//					.animate({'left':'500px'},3000)
//					.animate({'top':'500px'},4000)
//					.animate({'backgroundColor':'blue'},5000)
//		})
		$('button').eq(1).click(function(){
			$('div').stop(true)
		})
		$('button').eq(0).click(function(){
			$('div').delay(2000).animate({'width':'300px'},1000)
					.animate({'height':'500px'},2000)
					.animate({'left':'500px'},3000)
					.animate({'top':'500px'},4000)
					.animate({'backgroundColor':'blue'},5000)
		})
	</script>
</html>

LW0512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery第六章动画

动画显示隐藏show(秒数) 显示hide(秒数) 隐藏toggle() 切换显示/隐藏实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; backgrou
复制链接

扫一扫

专栏目录