源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery下的动画处理总结

  • 时间:2020-04-26 19:15 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery下的动画处理总结
queue()/ dequeue() 这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知。这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码
[u]复制代码[/u] 代码如下:
$('#test').animate({             "width": "300px",             "height": "300px",             "opacity":"1"         });
这样test div的height、width、opacity是同时变化的,有时候我们不希望同步执行,而是形状的变化和透明度的变化分开,先变成300*300的div,然后透明度再逐渐变化,我们需要这么写
[u]复制代码[/u] 代码如下:
$('#test').animate({             "width": "300px",             "height": "300px",         }, function () {             $('#test').animate({ "opacity": "1" });         });
同学们可以想象一下要是有十个动画流程,那代码是什么样的,queue()和dequeue()可以解决此类问题,为所有的流程方法见一个队列,让function依次调用,先看一下语法 [b]queue( [queueName ], newQueue )[/b] 操作欲执行队列方法 第一个参数是队列名称,不写的话默认是fx 第二个参数可以是一个函数数组,存放所有队列函数,也可以是一个回掉函数,用于向队列中添加新函数 [b]dequeue( [queueName ] )[/b] 为匹配元素执行队列中的下一个function 每次调用此方法执行队列中下一函数
[u]复制代码[/u] 代码如下:
var q = [             function () {                 $(this).animate({                     "width": "200px",                     "height":"200px"                 }, next)             },             function () {                 $(this).animate({                     "width": "400px",                     "height": "400px"                 }, next);             }         ];         function next(){             $('#test').dequeue('myQueue');         }         $('#test').queue('myQueue', q);         next();
上面代码就是可以让test div先变成200*200的,然后再变为400*400的,每个动画都执行回掉函数,调用队列中下一个方法,两个动画依次执行,如果在执行期想再添加某个函数可以这样
[u]复制代码[/u] 代码如下:
var q = [             function () {                 $(this).animate({                     "width": "200px",                     "height":"200px"                 }, next)             },             function () {                 $(this).animate({                     "width": "400px",                     "height": "400px"                 }, next);             }         ];         function next(){             $('#test').dequeue('myQueue');         }         $('#test').queue('myQueue', q);         next();         $('#test').queue('myQueue',function () {             $(this).slideUp().dequeue('myQueue');         });
总而言之这两个方法就是为了方便动画按照预定次序执行 clearQueue() /stop() 这两个方法主要是为了取消动画 clearQueue( [queueName ] ) 将队列中函数清空 stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用于停止正在进行的动画 queue:正在进行的动画队列名称 clearQueue:默认值为false,是否将队列本身也清空 jumpToEnd:默认值为false,是否立即执行完动画 如果想停止刚才动画可以这么写
[u]复制代码[/u] 代码如下:
$('#test').clearQueue('myQueue');
这样写不会不会终止动画,只是当前动画执行完后,不会再调用队列中下一个动画(队列被清空了嘛,没有下一个了),如果想立即停止动画,可以这么写
[u]复制代码[/u] 代码如下:
$('#test').stop();
至于停止动画是暂停还是立即执行完,就学要配置stop()的参数了 slideDown()/ slideUp()/ slideToggle() 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 [b]fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo() [/b]fadeIn()/ fadeOut()/ fadeToggle() 的用法和slide系列类似,不再一一说明,只不过这三个函数修改的时元素的透明度,fadeOut()函数在执行完后会将元素opacity复原,并把display属性设为none fadeTo( duration, opacity [, easing ] [, complete ] ) fadeTo()方法就没有那么复杂了,但是fadeTO()的duration和opacity不是可省略的,必须写 [b]show()/ hide()/ toggle()[/b] 这三个函数的用法和slide系列一样,但是在效果上有几点儿不同 1.如果参数duration不写,那么回立即执行没有动画 2.这个动画同时修改height、width、opacity属性 3.hide()执行完成后会将height、width、opacity属性还原,并把display设为none [b]animate() [/b]有些复杂的动画靠上面几个函数不能够实现,这时候就是强大的animate派上用场的时候了,animate()有两种用法 .animate( properties [, duration ] [, easing ] [, complete ] ) 大部分属性都不用解释,properties是个json,属性的值可以是字面量、function、”toggle”、简单表达式,如果是function会把返回值赋给属性,熟悉jQuery的同学肯定明白“toggle”是什么,就是让一个属性在初始值和最小值之间切换,能够使用toggle的属性有width、height、opacity等包含数字值属性,简单表达式是+=、-=等,比如可以这么些 “width”:”+=10px”。
[u]复制代码[/u] 代码如下:
$( "#block" ).animate({     width: "70%",     opacity: 0.4,     marginLeft: "0.6in",     fontSize: "3em",     borderWidth: "+=10px"   }, 1500 );
如果传入了回掉函数,该函数会在动画执行完后调用 .animate( properties, options ) 这种用法更为灵活,properties和前一个用法一样,常用options有 duration:动画时间 queue:function队列 step:每次属性调整的回掉函数 complete:完成动画的回掉函数 start:动画开始的时候调用 always:动画被终止或者意外发生没有执行完时发生 要不说jQuery好用,上面这几个配置是不是很熟悉呢
[u]复制代码[/u] 代码如下:
$( "#book" ).animate({     width: "toggle",     height: "toggle"   }, {     duration: 5000,     specialEasing: {       width: "linear",       height: "easeOutBounce"     },     complete: function() {       $( this ).after( "<div>Animation complete.</div>" );     }   });
[b]hover() [/b]严格说这个并不是个动画函数,但是由于低版本IE的hover对很多元素都不起作用,用CSS无法完成很多动作,所以经常需要使用JavaScript进行haver事件的处理。 .hover( handlerIn(eventObject), handlerOut(eventObject) ) 方法很简单,不多介绍了,这样就能把mousein 和mouseout写在一起了。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部