jQuery动画效果_PHP中文网手记

摘要：第一章 jQuery显示/隐藏 hide() 隐藏显示的元素书写格式：hide([speed][sesing] [fn]) show() 显示隐藏的元素书写格式：show([speed][sesing] [fn]) speed:显示过程的速度速

第一章 jQuery显示/隐藏

hide() 隐藏显示的元素

书写格式：hide([speed][sesing] [fn])

show() 显示隐藏的元素

书写格式：show([speed][sesing] [fn])

speed:显示过程的速度速度是毫秒值

sesing:指定切换的效果

fn:动画完成时执行的一个函数

<!DOCTYPE html>
<html>
<head>
	<title>jQuery显示/隐藏</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
	 div,p{width: 200px;height: 200px;background: red;margin: 10px 0;color: #fff;}
	</style>
</head>
<body>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#bt1').click(function(){
				$('p').hide('2000')
			})
			$('#bt2').click(function(){
				$('p').show('2000')
			})
		})
	</script>
</body>
	<button id="bt1">点击隐藏</button>
	<button id="bt2">点击显示</button>
	<!-- <div></div> -->
	<p>红玫瑰与白玫瑰</p>
	<p>朱砂痣与白月光</p>
</html>

第二章 jQuery的滑动

jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素

slideDown([speed] [fn])通过高度的变化，向下增大的动态效果下滑效果

speed:下滑显示过程的速度英文值或者毫秒

fn:动画完成时执行是函数

<!DOCTYPE html>
<html>
<head>
	<title>jQuery滑动</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.p1').hide()
			$('.bt1').click(function(){
				$('.p1').slideDown(777)
			})
			$('.bt2').click(function(){
				$('.p2').slideUp(777)
			})
			$('.bt3').click(function(){
				$('.p3').slideToggle(777)
			})
		})
			
	</script>
	<button class="bt1">下滑</button>
	<p class="p1">With this hand</p>
	<p class="p1">I'll left from sorrows</p>
	<p class="p1">Your cup will never empty</p><br>
	<button class="bt2">上滑</button>
	<p class="p2">You'll be fine</p>
	<p class="p2">Don't worry</p>
	<p class="p2">you will be fine</p><br>
	<button class="bt3">切换</button>
	<p class="p3">For I will be your wine</p>
	<p class="p3">With this candle</p>
	<p class="p3">I'll ligth your darkness</p>
</body>
</html>

slideUp([speed] [fn]) 通过高度的变化，向上减小的动态效果上滑效果

speed:上滑显示过程的速度英文值或者毫秒

fn:动画完成时执行是函数

slideToggle([speed] [fn])通过高度的变化来切换元素的可见性

speed:上滑隐藏/下滑显示过程的速度英文值或者毫秒

fn:动画完成时执行是函数

第三章 jQuery淡入淡出

jQuery是通过控制不透明度的变化来控制匹配到的元素的淡入淡出效果

fadeIn([speed] [fn]) 通过不透明度的变化来实现匹配到元素的淡入的效果;

fadeOut([speed] [fn])通过不透明度的变化来实现匹配到元素的淡出的效果;

fadeToggle([speed] [fn]) 通过不透明度的变化来开关所有匹配元素的淡入淡出效果;

fadeTo([speed] opacity [fn]) 把所有匹配到元素的不透明度以渐进发方式调整到指定的不透明度;

// speed:规定效果的时长

fn:动画完成时执行是函数

opacity：fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度（值介于0与1之间）

<!DOCTYPE html>

<html>

<head>

<title>jQuery淡入淡出</title>

.main{height: 240px;width: 200px;margin-right: 20px;float: left;}

.box1{height: 200px;width: 200px;background: yellowgreen;}

.box2{height: 200px;width: 200px;background: pink;}

.box3{height: 200px;width: 200px;background: blue;}

.box4{height: 200px;width: 200px;background: red;}

button{height: 40px;width: 200px;border:none;}

</style>

</head>

<body>

$(document).ready(function(){

$('.box1').hide()

$('.bt1').click(function(){

$('.box1').fadeIn(777)

})

$('.bt2').click(function(){

$('.box2').fadeOut(777)

})

$('.bt3').click(function(){

$('.box3').fadeToggle(777)

})

$('.bt4').click(function(){

$('.box4').fadeTo(777,0.5)

})

</script>

</div>

</div>

</div>

</div>

</body>

</html>

第四章自定义动画

jQuery中我们使用 animate()方法创建自定义的动画

语法:$(selector).animate({params},speed,fn);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 fn是动画完成后所执行的函数

<!DOCTYPE html>
<html>
<head>
	<title>jQuery自定义动画</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
	div{width: 100px;height: 100px;background: yellowgreen;position: absolute;}
	</style>
</head>
<body>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#bt1').click(function(){
			$('em').animate({fontSize:'37px'},1777)
		})
		$('#bt2').click(function(){
			$('div').animate({
				left:'377',
				opacity:'0.77',
				width:'toggle',
				height:'toggle'
			},1777)
		})
	})
	</script>
	<button id="bt1">点击字体放大</button><br>

	<em style="color:red">可口可乐</em><br>

	<button id="bt2">点击移动div</button>
	<div></div>
</body>
</html>

停止动画：

stop() 方法用于停止动画或效果，在它们完成之前；该方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

语法:

$(selector).stop(stopAll,goToEnd)

可选的参数 stopAll 规定是否应该清除动画队列。默认是 false 仅停止活动的动画，允许任何排入队列的动画向后执行

可选的参数 goToEnd 规定是否立即完成当前动画。默认是 false

默认情况下 stop() 会清除在被选元素上指定的当前动画

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
	.box1{position: absolute;background-color: pink;}
	</style>
</head>
<body>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#right').click(function(){
			$('.box1').animate({
				left:'600px',
				fontSize:'37px',
				fontWeight:'bold'
			},2777)
		})
		$('#stop').click(function(){
			$('.box1').stop()
		})
	})
	</script>
</body>
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="box1">XXXTENTACION</div>
</html>

批改老师：韦小宝批改时间：2019-01-23 11:42:09
老师总结：写的很棒总结注释的都很清楚 jQuery中可以实现很多的动画效果课后没事多练习练习继续加油吧

jQuery动画效果

热门词条