jQuery大法第五式--动画效果

一、基本的动画效果

1、隐藏元素

hide():可以用于隐藏元素，将元素CSS样式属性display设置为none，它会记住原先的属性状态。

（1）不带参数

hide()：用于实现不带任何效果的隐藏匹配元素。

（2）带参数

hide(speed,[callback])：用于实现以动画形式隐藏所有匹配的元素，并在隐藏完成后可选择地触发一个回调函数。

speed：动画的时长

callback：可选参数，用于指定动画结束后的回调函数。

2、显示元素

show():可以用于显示元素，将元素CSS样式属性display设置为block或者inline，它会恢复原先的属性状态。

（1）不带参数

show():用于实现不带任何效果的显示匹配元素。

（2）带参数

show(speed,[callback]):用于实现以动画形式显示所有匹配的元素，并在显示完成后可选择地触发一个回调函数。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本动画效果</title><style>ul{font-size: 12px;list-style: none;margin: 0px;padding: 0px;}li{padding: 7px;}a{color: blue;text-decoration: none;}a:hover{color: red;}#menu{float: left;text-align: center;width: 70px;height: 295px;padding-top: 5px;display: none;background-image: url(images/menu_bg.gif);}</style>
</head>
<body>
<span id="box"><img src="data:images/title.gif" width="30" height="80" id="flag" ><div id="menu"><ul><li><a href="javascript:void(0);">图书介绍</a></li><li><a href="javascript:void(0);">新书预告</a></li><li><a href="javascript:void(0);">图书销售</a></li><li><a href="javascript:void(0);">刊物发布</a></li><li><a href="javascript:void(0);">资料下载</a></li><li><a href="javascript:void(0);">好书推荐</a></li><li><a href="javascript:void(0);">技术支持</a></li><li><a href="javascript:void(0);">联系我们</a></li></ul></div>
</span>
<script src="jquery.js"></script>
<script>$(function () {$("#box").hover(function () {$("#menu").show(300);},function () {$("#menu").hide(300);}) ;});
</script>
</body>
</html>

运行结果：

图片素材:https://download.csdn.net/download/qq_36789311/11566903

3、切换元素的可见状态

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0
}
body{font-size:12px;
}
ul{list-style-type:none
}
a{text-decoration:none; color:#666; font-family:"宋体"
}
a:hover{text-decoration:underline; color:#903;
}
.content{width:600px; margin:40px auto 0 auto; border:1px solid #666; text-align:center
}
.container{border:5px solid #999; padding:10px;
}
.content ul{padding-left:15px;margin:0 auto;
}
.content .container ul li{ float:left; width:170px; line-height:20px; margin-right:15px;
}
.boxmore{ clear:both; margin-top:60px;
}
.boxmore a{display:block; border:1px solid #666; width:120px; height:30px;margin:0 auto; line-height:30px; outline:none;
}
.change a{color:#903; font-weight:bolder;
}
</style>
</head><body>
<script type="text/javascript" src="JS/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){var it=$(".content ul li:gt(5):not(:last)");it.hide();$(".boxmore a").toggle(function(){it.show();$(".boxmore a").text("精简资源");$("ul li").filter(":contains('网页布局精讲'),:contains('PHP视频教程')").addClass("change");    },function(){it.hide();$("ul li").removeClass("change");$(".boxmore a").text("显示全部资源");});
});
</script>
<div class="content"><div class="container"><ul><li ><a href="#">HTML5网页基础教程</a><span>(30440) </span></li><li ><a href="#">C#教程</a><span>(27220) </span></li><li ><a href="#">网页布局精讲</a><span>(20808) </span></li><li ><a href="#">MySQL数据库视频教程</a><span>(17821) </span></li><li ><a href="#">DreamWeaver CS6教程</a><span>(12289) </span></li><li ><a href="#">PhotoShop视频教程</a><span>(8242) </span></li><li ><a href="#">PHP视频教程</a><span>(14894) </span></li><li ><a href="#">Java视频教程</a><span>(9520) </span></li><li ><a href="#">建站知识</a><span>(2195) </span></li><li ><a href="#">Java基础教程</a><span>(4114) </span></li><li ><a href="#">JavaScript自学教程</a><span>(12205) </span></li><li ><a href="#">PHP开发宝典</a><span>(1466) </span></li><li ><a href="#">C语言入门与实践</a><span>(3091) </span></li><li ><a href="#">其它资源</a><span>(7275) </span></li></ul><div class="boxmore"> <a href="#"><span>显示全部资源</span></a> </div></div>
</div>
</body>
</html>

二、淡入淡出的动画效果

fadeIn(speed,[callback]):通过增大不透明度实现匹配元素淡入效果

fadeOut(speed,[callback])：通过减小不透明度实现匹配元素淡出效果

fadeTo(speed,opacity,[callback]):将匹配元素的不透明度以渐进的方式调整到指定的参数

示例：将第一个示例代码script部分更改成如下所示：

 $(function () {$("#box").hover(function () {$("#menu").fadeIn(300);//淡入效果},function () {$("#menu").fadeOut(300);//淡出效果}) ;});

效果如下：

三、滑动效果

1、滑动显示效果

slideDown()：会逐渐向下增加匹配的隐藏元素的高度，直到元素完全显示位置。

slideDown(speed,[callback])

2、滑动隐藏效果

slildeUp(): 会逐渐向上减少匹配元素的隐藏高度，直到元素完全隐藏为止。

slideUp(speed,[callback])

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伸缩式导航菜单</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">dl {width: 158px;margin:0px;}dt {font-size: 14px;padding: 0px;margin: 0px;width:146px;          /*设置宽度*/height:19px;            /*设置高度*/background-image:url(images/title_show.gif);        /*设置背景图片*/padding:6px 0px 0px 12px;color:#215dc6;font-size:12px;cursor:hand;}dd{color: #000;font-size: 12px;margin:0px;}a {text-decoration: none;       /*不显示下划线*/}a:hover {color: #FF6600;}#top{width:158px;           /*设置宽度*/height:30px;            /*设置高度*/background-image:url(images/top.gif);       /*设置背景图片*/}#bottom{width:158px;             /*设置宽度*/height:31px;            /*设置高度*/background-image:url(images/bottom.gif);        /*设置背景图片*/}.title{background-image:url(images/title_quit.gif);      /*设置背景图片*/}.item{width:146px;           /*设置宽度*/height:15px;            /*设置高度*/background-image:url(images/item_bg.gif);       /*设置背景图片*/padding:6px 0px 0px 12px;color:#215dc6;font-size:12px;cursor:hand;background-position:center;background-repeat:no-repeat;}
</style>
<script type="text/javascript">
$(document).ready(function(){$("dd").hide(); //隐藏全部子菜单$("dt[class!='title']").toggle(function(){//  slideDown:通过高度变化（向下增长）来动态地显示所有匹配的元素$(this).css("backgroundImage","url(images/title_hide.gif)");    //改变主菜单的背景$(this).next().slideDown("slow");},function(){//  slideUp:通过高度变化（向上缩小）来动态地隐藏所有匹配的元素$(this).css("backgroundImage","url(images/title_show.gif)");   //改变主菜单的背景$(this).next().slideUp("slow");});
});
</script>
</head><body>
<div id="top"></div>
<dl><dt>员工管理</dt><dd><div class="item">添加员工信息</div><div class="item">管理员工信息</div></dd><dt>招聘管理</dt><dd><div class="item">浏览应聘信息</div><div class="item">添加应聘信息</div><div class="item">浏览人才库</div></dd><dt>薪酬管理</dt><dd><div class="item">薪酬登记</div><div class="item">薪酬调整</div><div class="item">薪酬查询</div></dd><dt class="title"><a href="#">退出系统</a></dt>
</dl>
<div id="bottom"></div>
</body>
</html>

3、通过高度的变化动态切换元素的可见性

四、自定义动画效果

1、animate()方法创建自定义动画

animate(params,speed,callback)，使用时必须设置元素的定位属性position为relative或absolute，元素才能动起来。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义动画效果</title><style>*{margin: 0;padding: 0;font-family: "宋体";color: #333333;}.list,li{margin: 0;}.scroll{margin-left: 10px;margin-top: 10px;width: 270px;height: 120px;overflow: hidden;}.scroll li{width: 270px;height:30px;line-height: 30px;margin-left: 26px;}.scroll li a{font-size:14px;color: #333;text-decoration: none;}.scroll li a:hover{color: #66ccff;}</style>
</head>
<body><table width="270" border="0" cellpadding="0" cellspacing="0" style="margin-left: 12px"><tr><td align="left" height="50" style="font-size: 22px;" valign="bottom">即将上线</td></tr></table><div class="scroll"><ul class="list"><li><a href="#">《霍乱时期的爱情》</a></li><li><a href="#">百年孤独</a></li><li><a href="#">罗宾逊漂流记</a></li><li><a href="#">少年派的奇幻漂流</a></li></ul></div><script src="jquery.js"></script><script>$(function () {$(".scroll").hover(function () {clearTimeout(timeID);},function () {timeID = setInterval("autoScroll()",3000);});});function autoScoll() {$(".scoll").find(".list").animate({marginTop:"-25px"},500,function () {$(this).css({"margin-top":"0px"}).find("li:first").appendTo(this);})}</script>
</body>
</html>

运行结果：

2、使用stop()方法停止动画

stop(clearQueue,gotoEnd)：

clearQueue表示是否清空尚未执行完的动画队列（true表示清空动画队列）

gotoEnd表示是否让正在执行的动画直接到达动画结束时的状态（true表示直接到达动画结束时的状态）

本期学习到此结束，欢迎各位关注指教。

jQuery大法第五式--动画效果相关推荐

html用jq设置动态效果,jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画语法: $(selector).animate({params},spee ...
jquery工具箱旋转动画效果
jquery工具箱旋转动画效果今天给大家分享一个工具箱的旋转动画效果,因为做GIS项目的时候所需要到,这是我在懒人之家看到的一个jquery鼠标点击按钮图标旋转弹出图标菜单旋转动画. 首先,可以引用 ...
JQuery中的动画效果
show() hide() slideUp slideDown fadeIn fadeOut animate : 自定义动画 JQuery中的动画效果.html <!DOCTYPE html&g ...
vue之动画( 仿jquery的slideToggle动画效果 )
Vue提供了transition组件,写法: <transition name="box"></transition> 在进入/离开的过渡中,会有 6 个 ...
玩转Jquery中的动画效果(animate方法)
jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法: $(selector).animate({params},speed,callba ...
jQuery及css动画效果
1.jQuery动画效果首先引入jQuery,进入链接地址:https://www.bootcdn.cn/jquery/ <!DOCTYPE html> <html lang=&q ...
jquery中自定义动画效果实现
1. 语法: $(selector).animate({params},[speed,callback]);必需的 params 参数定义形成动画的 CSS 属性.可选的 speed 参数规定效果的时 ...
jquery中动画效果的函数
在jquery中有很多的动画效果,我给大家分享了一下jquery中的动画函数 jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueu ...
jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
jquery中的各种动画效果
注: 所有的动画效果都可以指定3种速度参数:"slow". "normal" ."fast"(时间长度分别为0.6秒.0.4秒和0.2秒) ...

jQuery大法第五式--动画效果

jQuery大法第五式--动画效果相关推荐

最新文章

热门文章