jQuery第六章动画

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

starry__sty

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

阅读量129

点赞数

分类专栏： jQuery内容文章标签： jquery

本文链接：https://blog.csdn.net/starry__sty/article/details/108922286

版权

jQuery内容专栏收录该内容

13 篇文章 0 订阅

订阅专栏

显示隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div></div>
		<!--<button>显示</button>
		<button>隐藏</button>-->
		<button>显示隐藏</button>
	</body>
	<script type="text/javascript">
//		$('button:eq(1)').click(function(){
//			$('div').hide(3000)
//		})
//		$('button:eq(0)').click(function(){
//			$('div').show(3000)
//		})
//		$('button').click(function(){
//			$('div').toggle(3000)
//		})
//		$('button').click(function(){
//			$('div').toggle(3000,function(){
//				alert('哈哈哈哈')
//			})
//		})
	</script>
</html>

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

上下隐藏显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div></div>
		<button>显示</button>
		<button>隐藏</button>
		<button>显示隐藏</button>
	</body>
	<script type="text/javascript">
//		$('button:eq(1)').click(function(){
//			$('div').slideUp(3000)
//		})
//		$('button:eq(0)').click(function(){
//			$('div').slideDown(3000)
//		})

//		$('button:eq(2)').click(function(){
//			$('div').slideToggle(3000)
//		})
	</script>
</html>

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

淡入淡出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div></div>
		<button>淡入</button>
		<button>淡出</button>
		<button>淡入淡出</button>
		<button>透明度</button>
	</body>
	<script type="text/javascript">
		$('button:eq(1)').click(function(){
			$('div').fadeOut(3000)
		})
		$('button:eq(0)').click(function(){
			$('div').fadeIn(3000)
		})
		$('button:eq(2)').click(function(){
			$('div').fadeToggle(3000)
		})
		$('button:eq(3)').click(function(){
			$('div').fadeTo(3000,.2)
		})

	</script>
</html>

animate() 自定义动画

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

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

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

	</script>
</html>

starry__sty

关注

0
点赞
踩
0

收藏

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

显示隐藏<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background: red; } </style> <script src="../
复制链接

扫一扫

专栏目录