jQuery也封装了动画操作，开发者通过jQuery编写少量的代码，就可以实现网页元素的飞动、淡入淡出等动画效果，而且还支持各种自定义动画效果。
jQuery封装的动画操作主要分为三类：基本动画方法、滑动动画方法和淡入淡出方法。下面具体介绍这三类方法。
1、 基本动画方法
基本动画方法主要是元素的显示、隐藏及状态的切换。方法如下表所示：
注释（1）
参数speed设置元素从隐藏到完全可见的速度（单位为毫秒），默认值为0。元素从隐藏到完全可见的过程中，会动态地改变每个匹配元素的高度、宽度和不透明度。参数speed除了设置数值外，还可以设置“slow”、“normal”、“fast”字符串值。
可选参数callback是回调函数，当元素完全显示后，执行callback回调函数。
案例代码11（案例代码见unit4\case13.html）：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
// 显示元素
$("#id_show").bind("click",function(e){
$("#id_text").show("slow")
});
// 隐藏元素
$("#id_hide").bind("click",function(e){
$("#id_text").hide("slow")
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p id="id_text" style="display:none;">城阙辅三秦，风烟望五津。与君离别意，同是宦游人。</p>
<input type="button" id="id_show" value="显示元素"/></p>
<input type="button" id="id_hide" value="隐藏元素"/></p>
</body>
<html>2、 滑动动画方法
jQuery可以让改变状态的元素具有滑动效果，方法如下表所示：
注释（1）
slideDown用于显示元素时，让元素具有向下滑动的效果。即元素的高度从0开始逐渐增大的其原有高度，增大的速度由参数speed给出。
参数speed单位为毫秒，默认值为400。speed除了设置数值外，还可以设置“slow”、“normal”、“fast”字符串值。可选参数callback是回调函数，当元素完全显示后，执行callback回调函数。
案例代码12（案例代码见unit4\case14.html）：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
// 滑动显示元素
$("#id_show").bind("click",function(e){
$("#id_text").slideDown(1000,function(){
alert("元素已显示");
})
});
// 隐藏元素
$("#id_hide").bind("click",function(e){
$("#id_text").slideUp(1000,function(){
alert("元素已隐藏");
})
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p id="id_text" style="display:none;">城阙辅三秦，风烟望五津。与君离别意，同是宦游人。</p>
<input type="button" id="id_show" value="滑动显示元素"/></p>
<input type="button" id="id_hide" value="滑动隐藏元素"/></p>
</body>
<html>3、 淡入淡出方法
淡入淡出方法是通过改变元素的透明度来显示动画效果，方法如下表所示：
注释（1）
fadeIn在显示元素时，将元素的透明度从0逐渐调整到100%透明度，让元素具有淡入动画效果。调整速度由参数speed给出，speed单位为毫秒。speed除了设置数值外，还可以设置“slow”、“normal”、“fast”字符串值。speed默认值是“normal”。
注释（2）
fadeTo用于调整元素的透明度，透明度由当前值调整到opacity，让元素具有淡入淡出的效果。参数speed设置透明度变化速度，参数opacity为要调整的透明度，可选参数callback是回调函数，当元素完全显示后，执行callback回调函数。
案例代码13（案例代码见unit4\case15.html）：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
// 淡入效果
$("#id_show").bind("click",function(e){
$("#id_text").fadeIn(2000,function(){
alert("元素已显示");
})
});
// 淡出效果
$("#id_hide").bind("click",function(e){
$("#id_text").fadeOut(2000,function(){
alert("元素已隐藏");
})
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p id="id_text" style="display:none;">城阙辅三秦，风烟望五津。与君离别意，同是宦游人。</p>
<input type="button" id="id_show" value="淡入效果"/></p>
<input type="button" id="id_hide" value="淡出效果"/></p>
</body>
<html>4、 自定义动画
jQuery还提供了animate()方法用于创建自定义动画，该方法可以在一组元素CSS属性值上定义动画，定义动画的方式是动态改变元素的透明度、高度、位置等CSS属性。animate()方法语法如下：
$(selector).animate({styles },speed,callback)
注意：该参数的属性名称必须采用驼峰写法，若属性名称只有一个英文单词（如color、left等）可以使用原属性名称，其它属性名称需要去掉单词之间的连接线，第二个单词首字母必须大写，如：paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。
参数styles设置产生动画效果的一个或多个 CSS 属性/值，每个属性/值用逗号分隔，整个params参数封闭在一对大括号内。例如：
{width:’300px’, opacity:’0.5’,height:’200px’}
参数speed用于设置从属性初始值到给出值的变化速度，单位是毫秒。也可以取字符串值"slow"和"fast"。
可选参数callback是回调函数，当动画执行完成后，执行callback回调函数。
案例代码14（案例代码见unit4\case16.html）：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
// 自定义动画
$("#id_show").bind("click",function(e){
$("#id_text").animate({
opacity: "0.5",
fontSize: "30px",
}, 1000);
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p id="id_text" style="opacity:1.0;font-size:12px;color:#000000;">
城阙辅三秦，风烟望五津。与君离别意，同是宦游人。</p>
<input type="button" id="id_show" value="自定义动画"/></p>
</body>
<html>