下载文档原格式
jQuery实现动画、消失、显现、渐出、渐⼊效果⽰例本⽂实例讲述了jQuery实现动画、消失、显现、渐出、渐⼊效果。
分享给⼤家供⼤家参考，具体如下：<!DOCTYPE html><html><head><meta charset="utf-8" /><script src="/jquery/2.0.0/jquery.min.js"></script><title></title><script>$(function(){$(but1).on("click",function(){$("img").hide(500) ; //消失}) ;$(but2).on("click",function(){$("img").show(5000) ; //显现}) ;$(but3).on("click",function(){$("img").slideUp(5000) ; //滑动消失}) ;$(but4).on("click",function(){$("img").slideDown(5000) ; //滑动显现}) ;$(but5).on("click",function(){$("img").slideToggle(5000) ; //滑动切换（消失后显现，显现后消失）}) ;$(but6).on("click",function(){$("img").fadeOut(5000) ; //淡出}) ;$(but7).on("click",function(){$("img").fadeIn(5000) ; //淡⼊}) ;$(but8).on("click",function(){$("img").fadeTo(500,0.5) ; //淡化}) ;$(but9).on("click",function(){$("div").animate({left:"800px"},5000) ; //移动（需要调整对象的style属性中position的值absolute）}) ;}) ;</script></head><body><input type="button" id="but1" value="消失"/><input type="button" id="but2" value="显现"/><input type="button" id="but3" value="滑动消失"/><input type="button" id="but4" value="滑动显现"/><input type="button" id="but5" value="滑动切换"/><input type="button" id="but6" value="淡出"/><input type="button" id="but7" value="淡⼊"/><input type="button" id="but8" value="淡化"/><input type="button" id="but9" value="移动"/><div style="position: absolute;"><img src="/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" height="200"></div> </body></html>运⾏效果（这⾥使⽤了本站演⽰图⽚加以测试）：这⾥的⽅法都可以再嵌套⽅法。
实验四jQuery动画效果【实验目的】1、掌握jQuery处理动画效果的方法；2、掌握jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法；3、掌握jQuery自定义动画的定义。
【实验准备】1、复习教材相关内容；2、预习本次实验；【实验内容】1、实现折叠菜单的效果，效果如图4-1所示。
图4-1代码如下：menu.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>第一题</title><style type="text/css">.mainleftFAQ {width: 150px;}.admintext11 {padding: 8px 10px;cursor: pointer;position: relative;margin:1px;font-weight:bold;background: #93cdff;font-family: "华文楷体";font-size: 20px;}.FAQlist {display:none;font-family: "新宋体";font-size: 14px;}.FAQlist a{padding:8px 0px;display:block;color:#006699;background-color:#EFEFEF;padding-left:10px;font-weight:bold;text-decoration:none;}.FAQlist a:hover {color:#7fb2f4;background-color:#dfdfdf;text-decoration:underline;}</style><script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() {//将二级菜单设置为不可见$(".FAQlist").hide();//单击一级菜单触发的事件$(".bartitleFAQ").click(function() {//将二级菜单全部设置为不可见$(".FAQlist").hide();//当前一级菜单的二级菜单设置为可见$(this).next().show("fast");});});</script></head><body><div class="mainleftFAQ"><div class="bartitleFAQ"><p class="admintext11">服务管理</p></div><div class="FAQlist"><a href=''> 等待提交</a><a href=''> 等待发布</a><a href=''> 正式项目</a><a href=''> 点此新增</a></div><div class="bartitleFAQ"><p class="admintext11">更新流程</p></div><div class="FAQlist"><a href=''> 后台搜索</a><a href=''> 更新流程</a></div><div class="bartitleFAQ"><p class="admintext11">下载管理</p></div><div class="FAQlist"><a href=''> 下载</a></div></div></body></html>2、实现图片的幻灯片效果，当在当前图片上单击时，显示下一张图片。
jquery实现动画效果（各种⽅法）1.show()和hide()和toggle()(这是show和hide的⼀个综合，⼀个按钮就实现显⽰和隐藏)效果：代码：<button type="button" class="show">普通show</button><button type="button" class="show1">⼀秒show</button><button type="button" class="hidden">普通hidden</button><button type="button" class="hidden1">⼀秒hidden</button><div id="box" style="width: 100px;height: 100px;background-color: red;"></div><script type="text/javascript">$(".show").click(function () {$("#box").show();})$(".show1").click(function () {$("#box").show(1000);})$(".hidden").click(function () {$("#box").hide();})$(".hidden1").click(function () {$("#box").hide(1000);}) //还可以添加slow（200）,fast（600）,normal（400）三个参数，默认是400毫秒</script>实现列队动画：效果：代码：<style>div{background: red;color: #fff;margin-left: 5px;float: left;display: none;}</style><div>你</div><div>好</div><div>吗</div><div>？</div><button type="button" class="show">显⽰列队动画</button><button type="button" class="hide">隐藏列队动画</button><script type="text/javascript">$(".show").click(function () {//列队动画，递归⾃调⽤$("div").first().show("fast",function testShow() {$(this).next().show("fast",testShow);})})$(".hide").click(function () {//列队动画，递归⾃调⽤$("div").last().hide("fast",function testShow() {$(this).prev().hide("fast",testShow);})})</script>2.滑动效果：包括slideUp()和slide()down和slideToggle()和上⾯实现⽅式⼀样的，效果呈现滑动效果3.淡⼊淡出：包括fadeIn()和fadeOut()和fadeToggle()和上⾯实现⽅式也是⼀样的，效果呈现淡⼊淡出但还有⼀个fadeTo('fast',0.3) 0.3是透明度。
Jquery动画，从入门到精通一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手!本文将介绍jQuery的动画相关函数.原来做动画如此简单!二.前言本系列文章的实例都是针对某一个技术细节的, 因为我们要学习的是基础知识, 虽然总有人希望要复杂一些的应用示例, 但是我想还是让我们先把基础打牢, 有了扎实的基础凭借每个人的智慧一定能创造出更多更好的应用.就在写这篇文章的前几天, 还有不止一个同事在为了"弹出层"效果而犯愁. 但是以后再面对这样的功能看过本篇文章的每一个人都可以开心的微笑了. jQuery, make work easy !三.从实例开始做web程序经常要使用弹出层, 比如单击文字或按钮显示一段提示文字等. 假设有如下需求:∙单击图中的"显示提示文字"按钮, 在按钮的下方显示一个弹出层.∙单击任何空白区域或者弹出层,弹出层消失.用原始javascript我们也完全可以完成这个工作. 有以下几点注意事项:1. 弹出层的位置需要动态计算. 因为触发弹出事件的对象可能出现在页面的任何位置, 比如截图中的位置.2. 为document绑定单击是关闭弹出层的函数, 要使用多播委托, 否则可能冲掉其他人在document绑定的函数.3. 为document绑定了关闭函数后, 需要在显示函数中取消事件冒泡, 否则弹出层将显示后立刻关闭. 用jQuery, 我们可以轻松地实现此实例:∙基本动画函数: 既有透明度渐变, 又有滑动效果. 是最常用的动画效果函数.∙滑动动画函数: 仅使用滑动渐变效果.∙淡入淡出动画函数: 仅使用透明度渐变效果.这三类动画函数效果各不相同, 用法基本一致. 大家可以自己尝试.另外也许上面的三类函数效果都不是我们想要的, 那么jQuery也提供了自定义动画函数, 将控制权放在我们手里让我们自己定义动画效果.下面对三类内置动画函数和自定义动画函数分别讲解.四. 基本动画函数上例中使用的show()和hide()是我们使用最多的基本动画函数.下面是jQuery的基本动画函数:基本动画函数Basics1. 使用基本动画函数基本的动画函数主要分为show,hide 和toggle 三个. 都提供了无参数的版本, 表示不适用动画切换元素的显示状态:在回调函数中的this是执行此函数的DOM对象. 会在动画结束时执行.2. 使用toggle函数toggle函数是功能更强大的函数, 可以切换元素的可见状态. 我们经常遇到需要使用toggle的情况. 比如希望一段文字第一次单击显示弹出层, 第二次单击隐藏弹出层.我们将开篇实例稍作修改即可实现这个效果:滑动动画函数Sliding讲解slideDown就是show的滑动效果版本, slideUp就是hide的滑动效果版本, slideToggle就是toggle 的滑动效果版本.参数完全相同:六.淡入淡出动画函数淡出淡出函数只提供透明度渐变的效果.淡入淡出函数Fading讲解fadeIn和fadeOut两个函数对应show和hide, 用于将对象以透明度渐变的效果显示和隐藏:透明度渐变没有切换函数.需要特别讲解的是fadeTo函数. 这个函数能让对象渐变到指定的透明度上. opacity参数取值从0-1, 比如0.6表示透明度为60%.和fadeIn与fadeOut不同的是, fadeTo函数只改变对象的透明度, 即使透明度为0对象仍然占位.而fadeIn和fadeOut最后一定会改变对象的display属性, fadeOut后对象将从页面上消失(不占位), 但是fadeTo仅仅是让其透明(占位).fadeTo函数可以配合fadeIn使用. 比如默认的情况下, fadeIn最后让对象完全显示:但是如果之前使用过fadeTo设置弹出层的透明度, 则可以让其以半透明:核心代码如下:六. 动画实验室动画实验室是"jQuery实战"一书中的示例, 方便我们查看上面三种动画的效果. 对应源代码的chapter7 \lab.effects.html 文件.源代码在本文最后提供下载.实验室截图如下:七.自定义动画函数上面三个渐变动画函数已经基本满足了我们日常需求. 但是如果我们一定要创建自己的特殊的效果, jQu ery也为我们提供了相关函数.自定义动画函数Custom参数说明1.params(可选)类型:Options说明:一组包含作为动画属性和终值的样式属性和及其值的集合.讲解:通过把元素的样式属性值, 从当前值逐渐调整到params设置的值而产生动画效果.2.duration(可选)类型:String,Number说明:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) 讲解:动画效果持续的时间, 时间越长则变得越慢. 如果省略则不会产生动画.3.easing(可选)类型:String说明:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和"swing".讲解:为了让元素逐渐达到params设置的最终效果, 我们需要有一个函数来实现渐变, 这类函数就叫做easing函数. 但是需要这里传递的只是easing函数名称, 使用前需要先将easing函数注册到jQuery上.4.options参数类型:Options说明:一组包含动画选项的值的集合。
Jquery 中的动画1、 show()和 hide()a) hide:为每个元素调用 hide 方法会给将该元素的 display 设置为 none $(―element‖).hide()相当于$(―element‖).css(―display‖,‖none‖); show:当把元素隐藏后，可以使用 show()方法将元素的 display 设置为先前的状态 （block,inline 等~） eg: <div class="article"> <div id="head">First Article</div> <div id="content">First Article....First Article....First Article....First Article....First Article....First </div> </div> $(function(){ $(".article #head").toggle(function(){ $(this).next().show(); $(this).css("background","#ccc"); },function(){ $(this).next().hide(); $(this).css("background","#fff"); }); }); b) show()和 hide()方法让元素动起来 可以为 show 和 hide 方法传递一个速度参数。
show(―slow‖); show(1000); hide(1000);//同时减少“内容”的高度、宽度、透明度2、fadeIn()和 fadeOut()只改变元素的透明度fadeOut()会在指定的一段时间内降低元素的透明度，直到完全消失。
JQuery⼏种动画效果的⽅法下⾯介绍了⼏种动画效果的⽅法，具体如下：1、show()显⽰效果语法：show(speed,callback) Number/String,Function speend为动画执⾏时间，单位为毫秒。
也可以为slow","normal","fast" callback可选,为当动画完成时执⾏的函数。
show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1").show(3000,function(){ alert("动画显⽰完成!"); }); 2、hide()隐藏效果语法:hide(speed,callback) Number/String,Functionhide(speed,easing,callback) Number/String $("#div1").hide(3000,function(){ alert("动画隐藏完成") });3、toggle()隐藏显⽰⾃动切换，当⽬前为显⽰则隐藏，当⽬前为隐藏则显⽰语法：toggle(speed,callback) Number/String,Function toggle(speed,callback) Number/String,String,Function $("#div1").toggle(3000,function(){ alert("动画效果切换完成") });4、slideDown()向下显⽰，slow()是⽔平与垂直⽅向同时展开，⽽slideDown是仅仅在垂直⽅向向下展开语法:slideDown(speed,callback) Number/String,Function slideDown(speed,[easing],callback) Number/String,Function $("#div1").slideDown(3000,function(){ alert("向下展开显⽰成功!"); });5、slideUp()向上隐藏, hide()是⽔平与垂直两个⽅向的，⽽slideUp()仅仅是垂直⽅向向上收起隐藏语法:slideUp(speed,callback) Number/String,Function slideUp(speed,[easing],callback) Number/String,String,Function $("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })6、slideToggle垂直⽅向上切换,toggle是⽔平与垂直两个⽅向上的，⽽slideToggle是仅仅垂直⽅向的。
jQuery三组基本动画与⾃定义动画操作实例总结⽬录1、显⽰（show）与隐藏（hide）1.1 show⽅法1.2 hide⽅法1.3 原理2、滑⼊（sliderDown）与隐藏（sliderUp）2.1 ⽤法2.2 滑⼊画出切换（slideToggle）2.3 原理3、淡⼊（fadeIn）与淡出（fadeOut）3.1 ⽤法3.2 淡⼊淡出切换（fadeToggle）3.3 淡⼊淡出到某个值（fadeTo）4、三组基本动画总结5、⾃定义动画（animate）6、easing参数7、动画队列8、停⽌动画8.1、stop()8.2、判断元素是否处于动画状态本⽂实例讲述了jQuery三组基本动画与⾃定义动画操作。
分享给⼤家供⼤家参考，具体如下：jQuery提供了三组基本动画，分别是显⽰与隐藏、淡⼊与淡出、滑⼊与画出，这三组基本动画都是标准的、有规律的的效果，jQuery还提供了⼀个⾃定义动画。
1、显⽰（show）与隐藏（hide）显⽰(show)与隐藏(hide)是⼀组动画1.1 show⽅法show([speed,[easing],[callback]])参数speed，可选，动画的执⾏时间如果不传，就没有动画效果。
毫秒值(⽐如1000),动画在1000毫秒执⾏完成(推荐)固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
参数callback，可选，执⾏完动画后执⾏的回调函数，每个元素执⾏⼀次。
参数easing，可选，这⾥先不讲，后⾯统⼀讲1.2 hide⽅法与show⽅法的⽤法完全⼀致。
1.3 原理show和hide修改的是元素的width、height、opacity。
2、滑⼊（sliderDown）与隐藏（sliderUp）滑⼊(slideUp)与滑出(slideDown)是⼀组动画，效果与卷帘门类似slideUp/slideDown,使⽤⽅法与show/hide基本⼀致。
分享一些常用的jQuery动画事件和动画函数在jquery中，jquery动画事件和动画函数经常用的到，今天小编抽时间给大家整理了些关于常用的jquery动画事件和动画函数，对jquery动画函数和动画事件相关知识感兴趣的朋友一起学习吧部分jQuery常用的动画函数，整理了一下，在做交互式页面的时候挺有用的fontSize（在animate函数的css参数指定并不同于标准css属性，例如这个css标准是：font-size。
同理上面很多也是这样的情况）jQuery动画函数分三类：1、基本动画函数：既有透明渐变又有滑动效果，常用动画效果。
2、滑动动画函数：仅使用滑动效果。
3、淡入淡出动画函数：仅使用淡入淡出效果。
一.基本动画函数：1、show()显示隐藏匹配元素。
这个就是'show( speed, [callback] )'无动画的版本。
如果选择的元素是可见的，这个方法将不会改变任何东西。
无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
例如：显示所有段落，$("p").show()2、show(speed,[callback])以优雅的动画显示匹配的元素，并且在显示完成后可选择返回一个回调函。
可根据指定的速度动态改变每个匹配元素高度、宽度和不透明度。
例如：用缓慢的动画将隐藏的段落显示出来，历时600毫秒，$("p").show(600)3、hide()隐藏显示元素。
这个就是'hide( speed, [callback] )'的无动画版。
如果选择的元素是隐藏的，这个方法将不会改变任何东西。
例如：隐藏所有段落，$("p").hide()4、hide(speed,[callback])以优雅的动画隐藏所有匹配的元素，并在显示完成后可选的触发一个回调函数。
⾃定义动画函数JQuery实现<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width: 100px;height: 100px;background: green;}</style><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){// $('div').animate(字典的形式写动画过程, 动画所需时间, 运动曲线, 回调函数)// 1、动画过程：{} -- css多属性写法相同// 2、时间以毫秒为单位, 600// 3、运动曲线：swing linear// 4、回调函数：就是匿名函数function(){} -- 作⽤：当动画完成之后执⾏的命令$('div').eq(0).animate({'width':'800px', 'height':'300px','background':'red'}, 1000, 'swing', function(){ alert('动画完成了')})// $('div').eq(1).animate({'width':'800px'}, 1000, 'linear')// ****animate不⽀持变⾊动画})</script></head><body><div></div><!-- <div></div> --></body></html>。
jQuery实现动画滑动⼆级菜单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.js" type="text/javascript"></script><script src="滑动动画.js" type="text/javascript"></script><link rel="stylesheet" href="滑动动画.css" type="text/css"/></head><body><div class="header"><ul><li class="nav"><a href="#">one</a></li><li class="nav"><a href="#">two</a></li><li class="nav"><a href="#">three</a></li><li class="nav"><a href="#">four</a></li></ul></div><div class="big"><div class="main"><div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div></div></div></body></html>*{margin:0;padding:0;}.header{background-color:aqua;height: 40px;}ul{list-style: none;}ul li{float: left;text-align: center;line-height: 40px;border-right: 1px solid white;}a{text-decoration:none;color: white;display: block;padding: 0 20px;}ul li a:hover {background-color: white;color: aqua;}.big{width:100%;overflow: hidden;height:0;top:40px;}.main{width: 400%;height:500px;}.a{width:25%;height: 500px;background-color: yellow;float:left;}.b{width:25%;height: 500px;background-color: red ;float:left;}.c{width:25%;height: 500px;background-color: black ;float:left;}.d{width:25%;height: 500px;background-color: blue;float:left;}$(function () {$(".header").on("click","li",function () {var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%";/*index()获取header⾥的li，并确定为第⼏个然后返回数字*/if ($(".big").hasClass("active")) {$(".main").animate({marginLeft: mlValue});}else{$(".main").css({marginLeft:mlValue});$(".big").animate({height:"500px"}).addClass("active");}});});。
一、$(document).ready()方法与window.onload方法之间的细微区别1. 执行时机Window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行。
通过jquery中的$(document).ready()注册的事件处理程序，在DOM完全就绪时就可以被调用。
Ps：如果元素的关联文件未下载完，避免出错，则使用load()方法。
load()方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对象，则会在所以内用（包括窗口、框架、对象和图像等）加载完毕后触发；如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
代码如下：$(window).load(function(){//编写代码})Js中window.onload=function(){//编写代码}2.多次使用Js中onload事件一次只能保存对一个函数的引用，会自动用后面的函数覆盖前面的函数。
而jQuery中的$(document).ready()方法每次调用时，$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序一次执行3.简写方式：$(function(){})$().ready(function(){})二、事件绑定——bind(type,[data],fn)第一个参数是事件类型，类型包括：blur（失去焦点）、focus（得到焦点）、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和errror等，也可以是自定义名称。
第二个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象第三个参数则是用来绑定的处理函数三、合成事件——hover()方法，toggle()方法hover(enter,leave) 用于模拟光标悬停事件。
