您的位置：首页 > 其它

WEB入门之十八动画特效

2021-01-11 22:16 162 查看

视频课：https://edu.csdn.net/course/play/7621

学习内容

jQuery显示/隐藏动画
jQuery滑动特效
jQuery淡入淡出特效
jQuery自定义动画特效

能力目标

能熟练实现jQuery内置动画特效
能熟练实现自定义动画特效

本章简介

动画特效是JavaScript在Web前端能发挥的巨大优势之一，也是最吸引用户的地方。但是直接使用JavaScript进行动画特效开发比较困难，特别是一些较复杂的动画特效，动辄就需要写百十行的代码，效率低、浏览器兼容性的问题也难以处理。

针对这些问题，jQuery提供了一些制作动画特效的函数，利用这些函数可以帮助开发人员快速、高效的开发出跨浏览器的动画特效。本章我们就学习这些神奇的动画特效函数。

核心技能部分

8.1 显示/隐藏动画

在DOM中，可以通过样式属性display来控制元素的显示和隐藏，但是这没有动画效果。jQuery提供了实现显示/隐藏动画的函数，详见表8-1-1所示。这些函数使用简单，下面做详细的介绍。

表8-1-1 显示/隐藏动画函数

函数	说明
show( )	元素显示动画特效
hide( )	元素隐藏动画特效
toggle( )	元素显示/隐藏切换动画特效

既然是动画，那么就一定跟速度有关系，所以这几个函数都有一个参数来设置动画的速度，该参数的取值有：

Ø 无参数：元素将直接显示/隐藏，没有动画特效

Ø slow：慢速（在600ms内）显示/隐藏

Ø normal：正常速度（在400毫秒内）显示/隐藏

Ø fast：快速（在200毫秒内）显示/隐藏

Ø 自定义数字：开发人员可以自己设置一个数字表示速度，单位毫秒

下面通过一个示例来演示show和hide函数的用法，参考代码如下所示。

示例8.1

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="jquery-1.7.2.min.js"></script><title>示例8.1</title></head><body><input type="button" id="btn" value="显示/隐藏动画特效"/><br><br><img src="ads/3.gif"  id="ad"/></body></html><script>$(	function(){		$("#btn").hover(			function()			{				$("#ad").show(1000);			},			function()			{				$("#ad").hide("slow");			}		)	})</script>

上述代码在按钮的悬浮/离开事件中实现图片的显示/隐藏动画，鼠标悬浮到按钮上时，图片在1000毫秒内显示；鼠标离开按钮时，图片慢速隐藏。

除了show和hide函数外，jQuery还提供了一个显示/隐藏切换动画函数toggle。该函数可以自动进行显示/隐藏的切换，同样可以使用一个参数来设置动画速度。下面我们对上一个示例进行简单改造，单击按钮时，让图片显示；再次单击时，让图片隐藏；依次循环... ...

示例8.2

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="jquery-1.7.2.min.js"></script><title>示例8.2</title></head><body><input type="button" id="btn" value="显示/隐藏动画特效"/><br><br><img src="ads/3.gif"  id="ad" /></body></html><script>$(	function(){		$("#btn").click(			function(){				$("#ad").toggle("slow");			}		)	})</script>

jQuery中的动画函数都支持回调，回调函数适合在动画执行完后继续处理一些业务。下面我们通过动画函数回调来改造示例8.1，当图片隐藏时，按钮上的文字改为“显示”；当图片显示时，按钮上的文字改为“隐藏”。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="jquery-1.7.2.min.js"></script><title>示例8.3</title></head><body><input type="button" id="btn" value="隐藏"/><br><br><img src="ads/3.gif"  id="ad" /></body></html><script>$(	function(){		$("#btn").hover(			function(){				$("#ad").show(1000,function(){						$("#btn").val("隐藏");					}									);			},			function(){				$("#ad").hide("slow",function(){						$("#btn").val("显示");					}									);			}		)	})</script>

上述代码在动画函数中使用回调函数改变按钮上的文字

8.1 滑动动画

滑动动画主要是控制元素的高度在指定时间内从有到无或从无到有，jQuery中实现滑动动画的函数见表8-1-2所示。

表8-1-2 滑动动画函数

函数	说明
slideDown( )	元素向下滑动特效（高度增加）
slideUp( )	元素向上滑动特效（高度减少）
slideToggle( )	元素向上/向下滑动切换特效

这几个函数也提供了一个参数来设置动画的速度，该参数的取值有：

无参数：元素将直接显示/隐藏，没有动画特效

slow：慢速（在600ms内）滑动

normal：正常速度（在400毫秒内）滑动

fast：快速（在200毫秒内）滑动

自定义数字：开发人员可以自己设置一个数字表示速度，单位毫秒

下面通过slideDown和slideUp函数实现一个滑动特效，参考代码如下所示。

示例8.4

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="jquery-1.7.2.min.js"></script><title>示例8.4</title><style type="text/css">#Layer1 {position:absolute;left:40px;top:26px;width:306px;height:22px;z-index:1;font-size:18px;border:thin solid;cursor:hand;background-color:#33CCFF;}#Layer2 {position:absolute;left:40px;top:53px;width:304px;height:260px;z-index:2;border:thin solid #999900;font-size:18px;background-color:#FFFFCC;}</style></head><body><div id="Layer1">jQuery简介</div><div id="Layer2">jQuery是一个由John Resig创建于2006年1月的开源项目。<br />jQuery凭借其简洁的语法和跨平台的兼容性，极大的简化了JS开发。其独特而优雅的代码风格改变了开发人员的设计思路和编码方式。<br />jQuery是一个轻量级的库，大小不超过200K。<br />jQuery能在当前主流的IE、FF、Opera等浏览器中正常运行。<br /></div></body></html><script>$(document).ready(function(){$('#Layer1').toggle(function(){$("#Layer2").slideDown("slow");},function(){$("#Layer2").slideUp("slow");})})</script>

除了slideUp和slideDown函数外，jQuery还提供了一个滑动切换函数slideToggle。该函数可以自动进行向上/向下滑动的切换，同样可以使用一个参数来设置动画速度。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="jquery-1.7.2.min.js"></script><title>示例8.5</title><style type="text/css"><!--#Layer1 {	position:absolute;	left:40px;	top:26px;	width:306px;	height:22px;	z-index:1;	font-size:18px;	border:thin solid;	cursor:hand;	background-color:#33CCFF;}#Layer2 {	position:absolute;	left:40px;	top:53px;	width:304px;	height:260px;	z-index:2;	border:thin solid #999900;	font-size:18px;	background-color:#FFFFCC;}--></style></head><body><div id="Layer1">jQuery简介</div><div id="Layer2">jQuery是一个由John Resig创建于2006年1月的开源项目。<br />jQuery凭借其简洁的语法和跨平台的兼容性，极大的简化了JS开发。其独特而优雅的代码风格改变了开发人员的设计思路和编码方式。<br />jQuery是一个轻量级的库，大小不超过200K。<br />jQuery能在当前主流的IE、FF、Opera等浏览器中正常运行。<br /></div></body></html><script>$(document).ready(	function(){		$('#Layer1').click(			function(){				$("#Layer2").slideToggle();			}		)	})</script>

slideToggle函数是这样工作的：如果元素高度存在，则向上滑动，即高度为0；如果元素高度为0，则向下滑动，不断这样切换。

8.1 淡入淡出动画

淡入淡出是指控制元素的透明度从0（隐藏）到1（显示）或从1到0，jQuery中实现淡入淡出动画的函数见表8-1-3所示。

表8-1-3 淡入淡出动画函数

函数	说明
fadeIn( )	元素淡入动画特效（透明度从0到1）
fadeOut( )	元素淡出动画特效（透明度从1到0）
fadeTo( )	调整元素的透明度到指定值（0到1范围内的小数）
fadeToggle( )	元素淡入/淡出切换动画特效

下面我们使用fadeIn、fadeOut和fadeTo来实现对图片的淡入淡出动画，参考代码如下所示。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="jquery-1.7.2.min.js"  type="text/javascript" language="javascript"></script><title>示例8.6</title></head><body><input type="button" id="btn" value="淡入淡出动画特效"/><br><br><img src="ads/3.gif"  id="ad" /><br /><br /><input type="radio" name="pl" value="0"/>0%<input type="radio" name="pl" value="0.25"/>25%<input type="radio" name="pl" value="0.5"/>50%<input type="radio" name="pl" value="0.75"/>75%<input type="radio" name="pl" value="1"/>100%</body></html><script>$(function(){	$("#btn").toggle(		function(){			$("#ad").fadeOut("slow");		},		function(){			$("#ad").fadeIn("slow");		}	)})$(":radio").click(	function(){		$("#ad").fadeTo("slow",$(this).val());	})</script>

单击按钮时，图片会在淡入和淡出动画之间进行切换，单击下面的单选按钮时可以使用fadeTo函数对图片的透明度进行精确控制

8.1 自定义动画

在前面讲过的诸多动画函数中，基本上都是通过改变元素的高度、宽度和透明度来实现动画的。但在实际应用中，这是远远不能满足需要的，比如说：如果想通过控制元素的位置来做一个动画，或者想做一系列的动画。那么，jQuery也充分考虑到了这一点，为我们提供了能实现自定义动画的animate()和delay函数，见表8-1-4所示。

表8-1-4 自定义动画函数

函数	说明
animate( )	这是jQuery中创建自定义动画的函数
delay( )	延时推迟动画

animate函数允许开发人员灵活控制任何属性以实现动画特效，具体语法如下所示：

animate ( { 属性1 : 值 , 属性2 : 值 , ... ... } , speed )

参数说明：

Ø 参数1是一对大括号，里面是“属性:值”形式，表示要控制的属性，可以有多个，有逗号隔开

Ø 参数2用来设置动画的速度，单位是毫秒

下面使用animate函数自定义一个动画，该动画实现了几组图片的滑动，参考代码如下所示。

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="jquery-1.7.2.min.js"></script><title>示例8.7</title><style>	#outDiv{		position:absolute;		height:96px;		width:512px;		z-index:2;		top:120px;		left:100px;		overflow:hidden;	}	#inDiv{	position:absolute;	height:96px;	width:2100px;	z-index:1;	top:0px;	left:0px;	}	#caption {		position:absolute;		width:510px;		height:22px;		z-index:3;		left: 100px;		top: 90px;		font-size:20px;		color:#FFFFFF;		background-color:#3399FF;		padding:2px;	}	img{		cursor:hand;		border:none;	}	#Layer1 {		position:absolute;		width:32px;		height:16px;		z-index:4;		left: 577px;		top: 96px;	}</style></head><body><div id="caption">影片展示</div><div id="outDiv">	<div id="inDiv">		<img src="ads/01.jpg" /><img src="ads/01.jpg" /><img src="ads/01.jpg" /><img src="ads/01.jpg" /><img src="ads/02.jpg" /><img src="ads/02.jpg" /><img src="ads/02.jpg" /><img src="ads/02.jpg" /><img src="ads/03.jpg" /><img src="ads/03.jpg" /><img src="ads/03.jpg" /><img src="ads/03.jpg" /><img src="ads/04.jpg" /><img src="ads/04.jpg" /><img src="ads/04.jpg" /><img src="ads/04.jpg" />		</div></div><div id="Layer1"><img src="ads/left.gif" name="leftBtn" width="16" height="16" id="leftBtn" /><img src="ads/right.gif" name="rightBtn" width="16" height="16"  id="rightBtn"/></div></body></html><script>	$("#rightBtn").click(		function(){			if($("#inDiv").position().left>=-1535)				$("#inDiv").animate({left:"-=512px"},500);		}	)	$("#leftBtn").click(		function(){			if($("#inDiv").position().left<0)				$("#inDiv").animate({left:"+=512px"},500);		}	)</script>

animate函数也支持回调，下面是我们自定义的一个动画，实现了一个常见的广告居中显示动画，其中用到了animate函数回调

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例8.8</title><script src="jquery-1.7.2.min.js"></script><style type="text/css"><!--#Layer1 {	position:absolute;	left:5px;	top:500px;	width:137px;	height:78px;	z-index:3;	border:#000000 thin solid;}#Layer2 {	position:absolute;	width:29px;	height:14px;	z-index:4;	left: 5px;	top: 500px;	font-size:12px;	color:#0000FF;	cursor:hand;}--></style></head><body background="ads/mainpage1.jpg"><div id="Layer1"><img src="ads/3.gif" width="100%" height="100%"/></div><div id="Layer2">播放</div></body></html><script>$("#Layer2").click(	function(){		if($("#Layer2").html()=="播放")		{			var bodyWidth=$(document).width();			var bodyHeight=$(document).height();	$("#Layer2").animate({left:(bodyWidth-586)/2,top:(bodyHeight-150)/2},300);	$("#Layer1").animate({left:(bodyWidth-586)/2,top:(bodyHeight-150)/2},300).animate({width:"586px",height:"150px"},500,				function(){					$("#Layer2").html("关闭");				}			);		}		else{			$("#Layer2").animate({left:"5px",top:"500px"},300);	$("#Layer1").animate({left:"5px",top:"500px",width:"137px",height:"78px"},300,				function(){					$("#Layer2").html("播放");				}			);		}	})</script>

delay函数用来延时推迟后面动画的执行，在执行一系列动画时比较有用。该函数有一个参数，用来设置延迟的时间，单位是毫秒。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例8.9</title><script src="jquery-1.7.2.min.js"></script></head><body><img  id="ad" src="ads/ly.gif" width="1034" height="179" style="display:none"/></body></html><script>$("#ad").slideDown("slow").delay(5000).fadeOut("slow");</script>

该示例中的广告图片是一个动画gif图片，图片上的动画需要5秒的时间播放，所以上述代码先控制广告图片向下滑动出来，然后使用delay函数延时5秒以等待图片动画播放完毕，最后从页面上慢慢淡出至消失。

本章我们学习了jQuery提供的各种动画特效，包括显示/隐藏动画、滑动动画、淡入淡出动画和自定义动画，这些动画特效都是通过jQuery内置的动画函数实现的，这些函数简单易用，大家要掌握熟练。

任务实训部分

1：表格展开/关闭动画

训练技能点

jQuery内置动画特效函数

需求说明

实现一个如图8.2.1所示的表格，当单击某个分组时，该分组下面的成员就显示/隐藏。

“前台设计组”请使用滑动动画；“前端开发组”请使用淡入淡出动画；“后台开发组”

请使用显示/隐藏动画。

2：滑动的广告

训练技能点

Ø jQuery自定义动画函数

需求说明

当单击左右两个箭头图片时，该箭头图片有灰色变为红色，同时控制一组广告图片左移/右移。

3：滑动的横向菜单

训练技能点

Ø jQuery内置动画函数

需求说明

模拟实现一个如图8.2.3所示的横向菜单，当鼠标悬浮到横向菜单上时，其子菜单

淡入显示；当鼠标离开横向菜单时，其子菜单淡出隐藏。

实现步骤

（1）实现图8.2.3所示的界面，二级子菜单默认隐藏。

（2）给一级菜单设置hover事件，并在该事件中实现二级子菜单的淡入淡出，参考代码如下所示。

<HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>横向菜单</TITLE><script src="jquery-1.7.2.min.js"></script><STYLE type="text/css">td {FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;}div{/*设置层背景样式*/background-color:#669933;text-align:center;position:absolute;z-index:2;display:none; }A {FONT-SIZE: 13px; COLOR: #000000; TEXT-DECORATION: none;/*文字链接的背影样式*/background-color:#dfdfdf;width:100px;line-height:22px;text-align:center;border-bottom:1 #FFFFFF solid;}A:hover {FONT-SIZE: 13px; COLOR: #FFFFFF;/*鼠标在文字链接上时的文字背景样式*/background-color:#cc0000;width:100px;line-height:22px;text-align:center;}</STYLE></HEAD><BODY><TABLE width="610" border="0" cellspacing="0" cellpadding="0" align="center"><TR><TD><A href="#" id="s1" class="p">关于中信</A></TD><TD><A href="#" id="s2" class="p">公司业务</A></TD><TD><A href="#" id="s3" class="p">公益事业</A></TD><TD><A href="#" id="s4" class="p">中信研究</A></TD><TD><A href="#" id="s5" class="p">推荐招聘</A></TD><TD><A href="#" id="s6" class="p">特色推荐</A></TD></TR><TR><TD><DIV id="s11"><A href="#">公司简介</A><BR><A href="#">集团领导</A><BR><A href="#">领导题词</A><BR><A href="#">业务回顾</A><BR><A href="#">公司历史</A><BR><A href="#">中信风格</A><BR><A href="#">公司年报</A><BR><A href="#">公司要闻</A></DIV></TD><TD><DIV id="s21"><A href="#">金融</A><BR><A href="#">非金融</A></DIV></TD><TD><DIV id="s31"><A href="#">扶贫</A><BR><A href="#">绿化</A><BR><A href="#">援藏</A></DIV></TD><TD><DIV id="s41"></DIV></TD><TD><DIV id="s51"></DIV></TD><TD><DIV id="s61"><A href="#">网络金融</A><BR><A href="#">中信出版</A><BR><A href="#">会展服务</A></DIV></TD></TR></TABLE></BODY></HTML><SCRIPT>$(".p").hover(function(){$("#"+$(this).get(0).id+"1").fadeIn("slow");},function(){$("#"+$(this).get(0).id+"1").fadeOut("slow");})</SCRIPT>

4：侧边滑动菜单

训练技能点

jQuery自定义动画函数

需求说明

图8.2.4和图8.2.5展示了网页侧边菜单，默认是关闭状态，当鼠标悬浮到上面时，侧边菜单就滑出来；当鼠标离开时，侧边菜单就收缩回去。（侧边菜单是一个图片）

实现步骤

（1）实现图8.2.4所示的界面，侧边菜单默认隐藏

（2）使用animate函数实现侧边菜单的滑动隐藏/显示，参考代码如下所示。

<script>$("#menu").hover(function(){$(this).animate({right:"+=120px"},500);},function(){$(this).animate({right:"-=120px"},500);})</script>

5：鼠标感应图片

训练技能点

jQuery内置动画函数

需求说明

图8.2.6显示的是广告图片，默认透明度偏暗，当鼠标悬浮到某个图片时，该图片变亮，离开时恢复变暗。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

WEB入门之十八 动画特效

8.1 显示/隐藏动画

8.1 滑动动画

8.1 淡入淡出动画

8.1 自定义动画

1：表格展开/关闭动画

2：滑动的广告

3：滑动的横向菜单

4：侧边滑动菜单

5：鼠标感应图片

WEB入门之十八动画特效