月与沉淀0916jq对象动画jquery处理

Jquery对象动画处理前端讲师：张焱CONTENT隐藏与显示动画效果淡入与淡出动画效果滑入滑出动画效果

自定义动画效果动画队列动画回调函数010203040506显示与隐藏动画效果01JavaScript01显示与隐藏动画效果hide(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态改变当前匹配元素的高度、宽度和不透明度，最终隐藏当前元素，此时元素的属性display修改为none。语法:hide(动画运行的时间);slow是0.6秒、normal是0.4秒和fast是0.2秒，建议使用毫秒例1:

$(“p”).hide(“slow”);//p元素0.6秒内隐藏$(“p”).hide(600);//同上例2:

$(“p”).hide();//⽴即隐藏例3:

$(“p”).hide(5000,”swing”,function(){语句体;});show(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态改变当前匹配元素的高度、宽度和不透明度，最终显示当前元素，此时元素的属性display恢复为none以外的值。语法:show(动画运行的时间);slow是0.6秒、normal是0.4秒和fast是0.2秒例1:$(“p”).show(“slow”);//p元素0.6秒内显示$(“p”).show(600);//同上例2:$(“p”).show();//立即显示例3:

$(“p”).show(5000,”swing”,function(){语句体;});JavaScript011.显示与隐藏动画效果1.fadeOut(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态的改变当前元素的不透明度（其他的不变），最终隐藏当前元素。此时元素的css属性修改为none。它的语法结构同hide()和show相同。例如:$(“p”).fadeOut(“slow”);//p元素0.6秒内淡出$(“p”).fadeOut(600);//同上例如:$(“p”).fadeOut();//立即淡出2.fadeIn(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态的改变当前元素的不透明度（其他的不便），最终显示当前元素。此时元素的css属性修改为none以外的值。

例如:$(“p”).fadeIn(“slow”);//p元素0.6秒内淡入$(“p”).fadeIn(600);//同上例如:$(“p”).fadeIn();//立即淡入淡入与淡出动画效果02JavaScript022.淡入与淡出动画效果1.fadeOut(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态的改变当前元素的不透明度（其他的不变），最终隐藏当前元素。此时元素的css属性修改为none。它的语法结构同hide()和show相同。例如:$(“p”).fadeOut(“slow”);//p元素0.6秒内淡出$(“p”).fadeOut(600);//同上例如:$(“p”).fadeOut();//立即淡出2.fadeIn(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态的改变当前元素的不透明度（其他的不便），最终显示当前元素。此时元素的css属性修改为none以外的值。

例如:$(“p”).fadeIn(“slow”);//p元素0.6秒内淡入$(“p”).fadeIn(600);//同上例如:$(“p”).fadeIn();//立即淡入JavaScript022.淡入与淡出动画效果3.fadeToggle(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法：会动态的改变当前元素不透明度（其他不变），最终切换当前元素的可见状态。也就是说，如果元素是可见的，则通过淡出效果切换成隐藏状态；如果元素是隐藏的，则通过淡入此效果切换为可见状态。例如:$(“p”).fadeToggle(“slow”);//p元素0.6秒内切换$(“p”).fadeToggle(600);//同上例如:$(“p”).fadeToggle();//0.4秒切换，因为默认值是normal4.fadeTo();方法:会把当前元素动态的调整到指定不透明度（其他不变）。语法:fadeTo(动画的时间，不透明度);不透明度取0-1之间的值，0表示透明，1表示不透明。例如:$(“p”).fadeTo(“slow”,0.5);//p元素在0.6秒内透明度变成0.5$(“p”).fadeTo(600,0.5);//同上滑入与滑出效果03JavaScri

tp033.

滑入与滑出效果slideUp(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态的改变当前元素的高度（其他的不变），最终隐藏当前元素。此时元素的css属性修改为none。它的语法结构同hide()和show相同。例如:$(“p”).slideUp(“slow”);//p元素0.6秒内发生滑出$(“p”).slideUp(600);//同上例如:$(“p”).slideUp();//0.4秒内发生滑出，因为默认值是normalslideDown(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态的改变当前元素的高度（其他的不变），最终显示当前元素。此时元素的css属性修改为block。它的语法结构同hide()和show相同。例如:$(“p”).slideDown(“slow”);//p元素0.6秒内发生滑入$(“p”).slideDown(600);//同上例如:$(“p”).slideDown();//0.4秒内发生滑入，因为默认值是normalJavaScri

tp033.

滑入与滑出效果3.slideToggle(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法：会动态的改变当前元素高度(其他不变），最终切换当前元素的可见状态。也就是说，如果元素是可见的，则通过滑出效果切换成隐藏状态；如果元素是隐藏的，则通过滑入此效果切换为可见状态。例如:$(“p”).slideToggle(“slow”);//p元素0.6秒内切换$(“p”).slideToggle(600);//同上例如:$(“p”).slideToggle();//0.4秒切换，因为默认值是

normal自定义动画效果04JavaScri

tp044.

自定义动画效果自定义动画概述：光靠前面讲过的动画方法，远远无法满足开发者的各种需求，比如改变元素的位置、缩放元素的大小等。1.

an大im家ate的()期;方望法:可以动态改变当前元素的各种CSS属性。语法:animate({需要改变的属性:值},动画持续时,[,easing用来指定切换效果,动画执行完毕调用的函数]););说明:animate()方法只能够改变可以取数字值的CSS属性，例如:width、height、border-width、padding来到这等里等，。相信大家都有一个明例如:$(“p”).animate({“width”:”200px”},”normal”);//p元素的宽度在0.4秒内变化到200px;确的目例标如，::或$(者“是p”希)望.a有ni一m技ate傍({“width”:”200px”},400);//同上身，或例者如是::希$(望“提p”升)自.a己ni，m又ate或({“width”:”200px”});//同上者是希带望指能定在动毕画业效之果后形通过式自己的努力例找如到:$一(“份p合”心).意an的im工a作te；({“width”:”hide”});//0.4秒内改变p元素的宽度，使用隐藏效果例如:$(“p”).animate({“width”:”hide”});//0.4秒内改变p元素的宽度，使用隐藏效果例如:$(“p”).animate({“width”:”toggle”});//0.4秒内改变p元素的宽度，使用切换隐藏显示效果JavaScri

tp044.自定义动画效果对于由多个单词组成的CSS属性名。有两种表示方法。$(大“家p”的).期an望imate({“border-width”:”15px”});

$(“p”).animate({“borderWidth”:”15px”});来到动这态里改，变相元信素大的家C都S有S一属个性明left、top、bottom、right，可以使元素运动到不同的位置。不过必须确的确目保标元，素或的者C是S希S属望性有一po技si傍tion已经被设置为relative、absolute或者fixed。身，或$者(“是p希”望)提.cs升s(自“己p，os又it或ion”,”relative”)者是希$望(“能p在”毕)业.an之im后通at过e(自{“己left”:”300px”});//p元素在0.4秒内向右移动，使得CSS属性的left值为300px。的努增力量找到一份合心意的工作；$(“p”).css(“position”,”relative”)$(“p”).animate({“left”:”+=300px”});//p元素在0.4秒内向右移动，使得CSS属性的

left值在原来的基础上增加300px。多重动画$(p).animate({“left”:”300px”,”height”:”100px’});//p元素在0.4秒内向右移动使得

CSS属性left值为300px，而在移动的同时，放大元素的高度为100pxJavaScri

tp044.自定义动画效果可以使用animate()方法，来代替其他所有的动画方法。例大家的期望如:$(“p”).animate({“height”:”hide”,”width”:”hide”,”opacity”:”来到这里h，i相de信”大}家,4都00有)一;个明确的目标，或者$(是“希p望”有).一hi技d傍e();身，或者是希望提升自己，又或者是希望能在毕业之后通过自己的努力找到一份合心意的工作；动画队列0505JavaScript5.动画队列可以使用animate()方法，来代替其他所有的动画方法。例如:$(“p”).animate({“height”:”hide”,”width”:”hide”,”opacity”:”hide”},400);上面例子里面的多个动画是同时发生的。如果想要按照顺序执行每个动画效果，例如:让p元素先向右滑动，然后再放大它的高度，只需要使用多次animate()方法，每个animate()方法执行一个动画效果就可以了。例1:$(“p”).animate({“left”:”300px”});//p元素在0.4秒内向右使得CSS属性left值为

300px。$(“p”).animate({“height”:”100px”});//然后p元素在0.4秒内放大高度为100px。总之，在CSS属性left改变之前，CSS属性height将不会被改变。像这样，动画效果执行具有先后顺序，称之为动画序列。05JavaScript5.2延迟动画队列延迟动画队列概述:如果需要延迟执行当前元素的某个动画效果。可以使用delay()方法。语法:delay(动画时间);动画时间可以使slow、normal、fast。也可以是毫秒。例1:$(“p”).delay(1000).animate({“left”:”300px”}).animate({“height”:”100px”});//延迟1秒后，p元素在0.4秒内向右使得CSS属性left值为300px。然后p元素在0.4秒内放大高度为

100px。例2:$(“p”).animate({“left”:”300px”}).delay(1000).animate({“height”:”100px”});//p元素在0.4秒内向右使得CSS属性left值为300px。延迟1秒后，然后p元素在0.4秒内放大高度为

100px。05JavaScript5.3中止动画队列终止动画队列概述:如果需要在某时刻停止当前元素正在进行的动画效果，可以使用stop();效果。语法:stop(是否要清空未执行完的动画队列，是否直接将正在执行的动画跳转到末状态);两个参数的默认值均是false;例如:原始动画:$(“p”).animate({“left”:”+=400px”},2000).animate({“top”:”+=200px”},2000).animate({“left”:”-=400px”},2000).animate({“top”:”-=200px”},2000);例如1:在p元素从状态1右移变到状态2的过程中，单击ID为btn1的元素，使用stop()方法终止动画1.从终止位置开始，p元素会继续执行动画2、动画3、动画4，最总会到状态1的左边。$(“btn1”).click(funciton(){$(“p”).stop();})05JavaScript5.3中止动画队列（续）例2:在p元素从状态1水平右移变到状态2的过程中，单击btn2，使用stop(true);方法终止动画1。p元素会始终停留在终止位置，后续动画2、动画3、动画4执行队列被清空，都不会被执行$(“btn2”).click(funciton(){$(“p”).stop(true);})例3:在p元素从状态1水平右移变到状态2的过程中，单击btn2，使用stop(false,true);方法终止动画1。并且，立即从终止位置跳转到状态2,并继续执行动画2、动画3、动画4，最终回到动画1$(“btn3”).click(funciton(){$(“p”).stop(false,true);})例4:在p元素从状态1水平右移变到状态2的过程中，单击btn2，使用stop(true);方法终止动画1。p元素会始终停留在终止位置，后续动画2、动画3、动画4执行队列被清空，都不会被执行$(“btn4”).click(funciton(){$(“p”).stop(true,true);})05JavaScript5.4循环队列如果希望循环执行一系列动画，可以建立一个包含动画队列的函数，然后再最后一个动画方法里面回调这个函数。例如:function

loop(){$(“p”).animate({“left”:”+=400px”},2000).animate({“top”:”+=200px”},2000).animate({“left”:”-=400px”},2000).animate({“top”:”-=200px”},2000,function(){loop();});}$(“btn”).click(function(){loop();})动画回调函数06JavaScri

tp066.动画回调函数动画回调函数概述:假设在元素动画结束后，设置它的CSS属性。如果这是按照常规思路，在动画方法后使用CSS()方法，并不能得到预期效果。实际情况是，动画开始之前，CSS()方法就被执行了。例如:$(“大p家”的).a期nim望ate({“width”:”300px”},1000).css(“border-width”,0);出现这个问题的原因是C