jQuery4--动画

最新推荐文章于 2022-11-04 12:05:29 发布

jiaody111

最新推荐文章于 2022-11-04 12:05:29 发布

阅读量161

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42139212/article/details/98304103

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

jQuery的任何动画效果，都可以指定三种速度参数：slow normal和fast

时间长度分别为 0.6s 0.4s 和0.2s。
使用速度关键字要加引号如show(‘fast’)
使用数字做参数不需加引号如show(1000)

显示，隐藏和切换动画: show()和hide()和toggle()

hide()方法能将元素的display属性设置为none，而且在这之前，会记住该元素原来的display属性值。当调用show()方法时，会根据hide()方法记住的display属性来显示该元素。
toggle()方法用来切换元素的可见状态。如果元素可见，切换为隐藏。
如果元素隐藏，切换为可见。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				//show()，hide()和toggle()中传递一个时间参数,可控制元素显示的速度参数
				//第二个参数是回调函数
				$('button').eq(0).click(function(){
					$('div').show(1000) 
				})
				$('button').eq(1).click(function(){
					$('div').hide(2000)
				})
				$('button').eq(2).click(function(){
					$('div').toggle(1000)
				})
			})
		</script>
		<style type="text/css">
			div{
				height: 200px;
				width: 200px;
				background: red;
				display: none;
			}
		</style>
	</head>
	<body>
		<button>显示</button>
		<button>隐藏</button>
		<button>切换</button>
		<div></div>
	</body>
</html>

改变元素高度动画：slideDown(),slideUp()和slideToggle()

这三种方法只能改变元素的高度
如果一个元素的display属性是none，slideDown()方法能将该元素从上至下延伸显示。
slideUp()能将元素从下到上缩短隐藏。
slideToggle()通过改变元素的高度切换元素的可见性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				
				$('button').eq(0).click(function(){
					$('div').slideDown(1000) 
				})
				$('button').eq(1).click(function(){
					$('div').slideUp(2000)
				})
				$('button').eq(2).click(function(){
					$('div').slideToggle(1000)
				})
			})
		</script>
		<style type="text/css">
			div{
				height: 200px;
				width: 200px;
				background: red;
				display: none;
			}
		</style>
	</head>
	<body>
		<button>显示</button>
		<button>隐藏</button>
		<button>切换</button>
		<div></div>
	</body>
</html>

监听页面滚动sroll()

$(function(){
				$(window).scroll(function(){
					var offset = $("html,body").scrollTop() //滚动条距离页面顶部的距离
					console.log(offset)
					if(offset >= 400){
						$('div').show(1000)
					}else{
						$('div').hide(1000)
					}
				})
			})

stop()方法结束动画

如果给一个元素绑定hover事件，当用户把光标移入元素，会触发动画效果。如果动画效果还没结束，用户就将光标移出这个元素，那么光标移出的动画效果就会加入动画列队，等待移入动画结束后才能执行。如果用户移入和移出的速度过快，就会导致动画效果与光标的动作不一致。
解决：在光标的移入和移出动画之前加入stop()方法，能结束当前正在执行的动画，并立即执行在动画列队中的下一个动画。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				$('.nav>li').hover(function(){
					var $sub = $(this).children('.sub')
					$sub.stop()
					$sub.slideDown(1000)
				},function(){
					var $sub = $(this).children('.sub')
					$sub.stop()
					$sub.slideUp(1000)
				})
			})
		</script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul>li{
				list-style: none;
			}
			.nav{
				width: 300px;
				height: 50px;
				margin: 100px auto;
			}
			.nav > li{
				float: left;
				width: 100px;
				line-height: 50px;
				background: green;
				text-align: center;
			}
			.sub{
				display: none;
				background: purple;
			}
		</style>
	</head>
	<body>
		<ul class='nav'>
			<li>一级菜单
			<ul class='sub'>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul></li>
			<li>一级菜单</li>
			<li>一级菜单</li>
		</ul>
	</body>
</html>

淡入和淡出动画：fadeIn()和fadeOut()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				$('button').eq(0).click(function(){
					$('div').fadeIn()//淡入 可传递时间参数
				})
				$('button').eq(1).click(function(){
					$('div').fadeOut()//淡出 可传递时间参数 在一定时间内降低元素的不透明度直到完全消失
				})
				$('button').eq(2).click(function(){
					$('div').fadeToggle()//通过切换元素的不透明度变化控制元素的可见性
				})
				$('button').eq(3).click(function(){
					$('div').fadeTo(1000,0.4)//把元素的不透明度以渐进的方式调整到指定值 第二个参数是元素的可见的不透明度 范围是0-1
				})
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div {
				height: 100px;
				width: 100px;
				background: green;
				display: none;
			}
		</style>
	</head>
	<body>
		<button>淡入</button>
		<button>淡出</button>
		<button>切换</button>
		<button>淡入到</button>
		<div></div>
	</body>
</html>

show()和hide()方法能同时修改元素的多个属性，如高度、宽度和不透明度等

fadeOut()和fadeIn()方法只能修改元素的不透明度

slideDown()和slideUp()方法只能修改元素的高度

自定义动画animate()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				 /*
				第一个参数: 接收一个对象, 可以在对象中修改属性，可以同时修改多个属性，同一个对象中的这多个属性的动画会同时执行
				第二个参数: 指定动画时长
				第三个参数: 指定动画节奏, 默认就是swing先慢中间快最后慢 linear匀速
				第四个参数: 动画执行完毕之后的回调函数
				*/
				$('button').eq(0).click(function(){
					$('.one').animate({
						width:400
					},1000)
				})
				$('button').eq(1).click(function(){
					/*
					* 累加和累减属性： += 和 -= 在元素的当前属性值上进行加减操作
					*/ 
					$('.two').animate({
						width:'+=100'
					},1000)
				})
				$('button').eq(2).click(function(){
					/*
					* 使用关键字控制元素属性的变化
					*/ 
					$('.two').animate({
						width:'hide'
					},1000)
				})
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div {
				width: 100px;
				height: 100px;
				margin-top: 10px;
				background: red;
			}

			.two {
				background: blue;
			}
		</style>
	</head>
	<body>
		<button>操作属性</button>
		<button>累加属性</button>
		<button>关键字</button>
		<div class="one"></div>
		<div class="two"></div>
	</body>
</html>

延迟和停止动画：delay()和stop()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				/*
				*链式法则：按顺序执行动画
				* delay(时间)延长多久后再执行动画
				*/
				$('button').eq(0).click(function(){
					$('.one').animate({
						width:200
					},1000).delay(2000).animate({height:200},1000)
				})
				$("button").eq(1).click(function () {
				    // 立即停止当前动画, 继续执行后续的动画
				    // $("div").stop();
				    // $("div").stop(false);
				    // $("div").stop(false, false);
				
				    // 立即停止当前和后续所有的动画
				    // $("div").stop(true);
				    // $("div").stop(true, false);
				
				    // 立即完成当前的, 继续执行后续动画
				    // $("div").stop(false, true);
				
				    // 立即完成当前的, 并且停止后续所有的
				    $("div").stop(true, true);
				});
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.one {
				width: 100px;
				height: 100px;
				background: red;
			}

			.two {
				width: 500px;
				height: 10px;
				background: blue;
			}
		</style>
	</head>
	<body>
		<button>开始动画</button>
		<button>停止动画</button>
		<div class="one"></div>
		<div class="two"></div>
	</body>
</html>

jiaody111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery4--动画

jQuery的任何动画效果，都可以指定三种速度参数：slow normal和fast时间长度分别为 0.6s 0.4s 和0.2s。使用速度关键字要加引号如show(‘fast’)使用数字做参数不需加引号如show(1000)显示，隐藏和切换动画: show()和hide()和toggle()hide()方法能将元素的display属性设置为none，而且在这之前，会记住该元素原来的...
复制链接

扫一扫