1.基本效果

匹配元素从左上角开始变浓变大或缩小到左上角变淡变小

①隐藏元素

除了可以设置匹配元素的display:none外,可以用以下函数

hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次

slow=600毫秒  normal=400毫秒  fast=200毫秒

以优雅的动画隐藏所有匹配的元素,并在隐藏完成后可选的触发一个回调函数。

②显示元素

show(speed,[callback])    以优雅的动画显示所有匹配的元素,并在显示完成后可选的触发一个回调函数。

③交替显示隐藏

toggle(speed,[callback])  以优雅的动画切换匹配元素的可见状态,原来可见切换为不可见,原来不可见切换为可见。

<input type=”button” id=”hide1″ value=”hide()” />

<input type=”button” id=”show1″ value=”show()” />

<input type=”button” id=”toggle1″ value=”toggle()” />

<div  id=”1″ style=”width:100px; height:100px; background-color:Green;”></div>

$(function(){

$(“#hide1”).click(function(){$(“#1”).hide(700)});

$(“#show1”).click(function(){$(“#1”).show(700)});

$(“#toggle1”).click(function(){$(“#1”).toggle(700)});

})

2.滑动效果

①向上收缩效果

slideUp(speed,[callback])  通过高度的变化方式向上隐藏元素,并在隐藏完成后可选的触发一个回调函数。

②向下展开效果

slideDown(speed,[callback])  通过高度的变化方式向下显示元素,并在显示完成后可选的触发一个回调函数。

③交替伸缩效果

slideToggle(speed,[callback]) 切换匹配元素的高度的方式来改变可见状态,原来可见切换为不可见,原来不可见切换为可见。

$(“#slideup1”).click(function(){$(“#1”).slideUp(700)});

$(“#slidedown2”).click(function(){$(“#1”).slideDown(700)});

$(“#slidetoggle”).click(function(){$(“#1”).slideToggle(700)});

3.淡入淡出效果

通过控制匹配元素的不透明度来实现元素的显示与隐藏

①淡入效果

fadeIn(speed,[callback])  通过不透明度的变化逐渐将匹配元素显现出来

$(“#fadein”).click(function(){$(“#1”).fadeIn(“slow”)});

②淡出效果

fadeOut(speed,[callback])  通过不透明度的变化逐渐将匹配元素隐藏起来

③自定义不透明度

淡入或淡出的最终结果为自定义的透明度

fadeTo(speed,opacity,[callback])  opacity的值域是0~1之间

4.自定义动画效果

①自定义动画

animate(params,duration,[easing],[callback])  返回值:jQuery  参数-params:一个包含类似CSS样式设置的json对象,该对象决定了匹配元素要变成什么样子,如:{height:”100%”,width:”70%”,fontSize:”4em”,color:”white”}但这些样式属性的名字与CSS的命名不同,它们使用骆驼命名法如fontSize 而在CSS中是font-size   duration:类似于前面几个函数的speed参数,表示匹配元素从开始变化到最终结束变化的时长,其值的设置也一样String,Number  easing:这个不太明白,要使用的擦除效果的名称(需要插件支持),默认jQuery提供linear和swing|String   callback:和前面一样

这个函数可不像看上去那么简单,有几点需注意1.既然该函数是将匹配元素从原来样子变化成函数中params参数中设置的样子,那么就必须有原来的样子,即params中设置的样式属性必须在原来的样子中有设置过,不能本来没有设置border,却在params中这样设置{borderStyle:”solid”,borderWidth:”1px”}     2.就是前面提到过的样式属性的骆驼命名法      3.有些样式属性animate是不支持的,即便你在原来的样子里有设置过,比如background-color,在params中不能想当然的就设置了backgroundColor样式属性。   http://www.stylejar.com/tag/jquery

<div id=”3″ style=”width:200px; height:300px; border:solid 1px; position:absolute; left:-180px;”>

用户名:<input type=”text” /><br />

密码:<input type=”password” /></div>

$(function(){

$(“#3″).mouseover(function(){$(this).stop().animate({left:”0px”})

}).mouseout(function(){$(this).stop().animate({left:”-180px”},3000)})

})

http://blog.sina.com.cn/s/blog_6168f0090100el4p.html

以上实现了我们经常在网页上见的滑动框的效果,一开始框在浏览器左侧露出20px,当鼠标滑到上面时框全部露出,鼠标滑出框时框又只露出20px, 我们看到params中的样式属性都出现在了”原来的样子中-style属性中”。另外对于位置变化的动画效果,要先给元素定位,如本处的position:absolute。这个例子中另外一个需要注意的是stop()函数:停止所有在指定元素上正在运行的动画。http://www.w3school.com.cn/jquery/effect_stop.asp

$(“#3″).mouseover(function(){$(this).stop().animate({height:”toggle”,”width:”toggle”})})

如上样式属性值设成toggle的话表示在有和无之间进行切换

②jQuery动画队列

把针对某个匹配元素的多个动画操作放入一个队列中进行管理,这是默认设置,这样队列中的动画会按先后顺序一个一个执行

如果不希望某个动画按顺序执行,而是希望它最先执行,可以如下设置animate()函数,这是animate函数的有一种写法,它将除parmas以外的参数也用一个json对象来表示

$(“#id”).animate(parmas,{queue:false,duration:1000}).animate(parmas,{queue:false,duration:1000})

以上俩动画会同时执行,总耗时1秒,而

$(“#id”).animate(parmas,{duration:1000}).animate(parmas,{duration:1000})

这俩动画会一个一个执行,总耗时2秒

以上所讲的所有动画函数均属于动画队列函数

http://hi.baidu.com/chougood/blog/item/350421338b4156f31a4cff11.html

它们可以被队列控制函数所控制http://www.w3school.com.cn/jquery/jquery_ref_queue.asp

当然队列控制函数不仅仅只能控制动画队列函数,也能控制其他普通函数

如队列控制函数queue()函数

http://shawphy.com/2009/04/how-to-use-queue-and-dequeue.html

http://mrthink.net/jqueryapi-queue-dequeue/

补:

delay(duration,[queueName])  http://shawphy.com/2010/11/jquery-delay.html

 

 

这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知。这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码

  1. $(\'#test\').animate({
  2. "width": "300px",
  3. "height": "300px",
  4. "opacity":"1"
  5. });

这样test div的height、width、opacity是同时变化的,有时候我们不希望同步执行,而是形状的变化和透明度的变化分开,先变成300*300的div,然后透明度再逐渐变化,我们需要这么写

  1. $(\'#test\').animate({
  2. "width": "300px",
  3. "height": "300px",
  4. }, function () {
  5. $(\'#test\').animate({ "opacity": "1" });
  6. });

同学们可以想象一下要是有十个动画流程,那代码是什么样的,queue()和dequeue()可以解决此类问题,为所有的流程方法见一个队列,让function依次调用,先看一下语法

queue( [queueName ], newQueue ) 操作欲执行队列方法

第一个参数是队列名称,不写的话默认是fx

第二个参数可以是一个函数数组,存放所有队列函数,也可以是一个回掉函数,用于向队列中添加新函数

dequeue( [queueName ] ) 为匹配元素执行队列中的下一个function

每次调用此方法执行队列中下一函数

复制代码

  1. var q = [
  2. function () {
  3. $(this).animate({
  4. "width": "200px",
  5. "height":"200px"
  6. }, next)
  7. },
  8. function () {
  9. $(this).animate({
  10. "width": "400px",
  11. "height": "400px"
  12. }, next);
  13. }
  14. ];
  15.  
  16. function next(){
  17. $(\'#test\').dequeue(\'myQueue\');
  18. }
  19.  
  20. $(\'#test\').queue(\'myQueue\', q);
  21. next();

复制代码

上面代码就是可以让test div先变成200*200的,然后再变为400*400的,每个动画都执行回掉函数,调用队列中下一个方法,两个动画依次执行,如果在执行期想再添加某个函数可以这样

复制代码

  1. var q = [
  2. function () {
  3. $(this).animate({
  4. "width": "200px",
  5. "height":"200px"
  6. }, next)
  7. },
  8. function () {
  9. $(this).animate({
  10. "width": "400px",
  11. "height": "400px"
  12. }, next);
  13. }
  14. ];
  15.  
  16. function next(){
  17. $(\'#test\').dequeue(\'myQueue\');
  18. }
  19.  
  20. $(\'#test\').queue(\'myQueue\', q);
  21. next();
  22. $(\'#test\').queue(\'myQueue\',function () {
  23. $(this).slideUp().dequeue(\'myQueue\');
  24. });

复制代码

总而言之这两个方法就是为了方便动画按照预定次序执行

这两个方法主要是为了取消动画

clearQueue( [queueName ] ) 将队列中函数清空

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用于停止正在进行的动画

queue:正在进行的动画队列名称

clearQueue:默认值为false,是否将队列本身也清空

jumpToEnd:默认值为false,是否立即执行完动画

如果想停止刚才动画可以这么写

  1. $(\'#test\').clearQueue(\'myQueue\');

这样写不会不会终止动画,只是当前动画执行完后,不会再调用队列中下一个动画(队列被清空了嘛,没有下一个了),如果想立即停止动画,可以这么写

  1. $(\'#test\').stop();

至于停止动画是暂停还是立即执行完,就学要配置stop()的参数了

slide效果在做动画的时候经常会使用,尤其是菜单,这三个函数很简单,就是元素收起/伸展/自动判断收起伸展,但是其参数不仅仅是duration,我们还能加一些其他的控制,看看API中的介绍,这Sanger函数参数类似,那slideUp举例

slideUp( [duration ] [, easing ] [, complete ] ) easing是渐变方式,这个我从来没有手工改动过,duration不写的话,默认会用大概一秒的时间完成动画

slideUp(options)

options中常用的配置有

duration:动画时间

queue:这个看了上面自然会懂

step:动画过程中每次属性改动时执行

complete:动画完成时执行

start:动画开始时执行

always:动画被终止或者意外发生没有执行完时发生

这三个函数在执行的时候会修改元素height,在sideUp()执行完后会把height复原,并把diaplay设为none

fadeIn()/ fadeOut()/ fadeToggle() 的用法和slide系列类似,不再一一说明,只不过这三个函数修改的时元素的透明度,fadeOut()函数在执行完后会将元素opacity复原,并把display属性设为none

fadeTo( duration, opacity [, easing ] [, complete ] ) fadeTo()方法就没有那么复杂了,但是fadeTO()的duration和opacity不是可省略的,必须写

这三个函数的用法和slide系列一样,但是在效果上有几点儿不同

1.如果参数duration不写,那么回立即执行没有动画

2.这个动画同时修改height、width、opacity属性

3.hide()执行完成后会将height、width、opacity属性还原,并把display设为none

有些复杂的动画靠上面几个函数不能够实现,这时候就是强大的animate派上用场的时候了,animate()有两种用法

.animate( properties [, duration ] [, easing ] [, complete ] )

大部分属性都不用解释,properties是个json,属性的值可以是字面量、function、”toggle”、简单表达式,如果是function会把返回值赋给属性,熟悉jQuery的同学肯定明白“toggle”是什么,就是让一个属性在初始值和最小值之间切换,能够使用toggle的属性有width、height、opacity等包含数字值属性,简单表达式是+=、-=等,比如可以这么些 “width”:”+=10px”。

复制代码

  1. $( "#block" ).animate({
  2. width: "70%",
  3. opacity: 0.4,
  4. marginLeft: "0.6in",
  5. fontSize: "3em",
  6. borderWidth: "+=10px"
  7. }, 1500 );

复制代码

如果传入了回掉函数,该函数会在动画执行完后调用

.animate( properties, options )

这种用法更为灵活,properties和前一个用法一样,常用options有

duration:动画时间

queue:function队列

step:每次属性调整的回掉函数

complete:完成动画的回掉函数

start:动画开始的时候调用

always:动画被终止或者意外发生没有执行完时发生

要不说jQuery好用,上面这几个配置是不是很熟悉呢

复制代码

  1. $( "#book" ).animate({
  2. width: "toggle",
  3. height: "toggle"
  4. }, {
  5. duration: 5000,
  6. specialEasing: {
  7. width: "linear",
  8. height: "easeOutBounce"
  9. },
  10. complete: function() {
  11. $( this ).after( "<div>Animation complete.</div>" );
  12. }
  13. });

复制代码

严格说这个并不是个动画函数,但是由于低版本IE的hover对很多元素都不起作用,用CSS无法完成很多动作,所以经常需要使用JavaScript进行haver事件的处理。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

方法很简单,不多介绍了,这样就能把mousein 和mouseout写在一起了。

版权声明:本文为suizhikuo原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/suizhikuo/p/3343711.html