jQuery下的动画处理总结
queue()/ dequeue()
这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽，不为常人所知。这两个方法在动画处理的时候很有用，我们经常会写一些这样的代码
$('#test').animate({
"width": "300px",
"height": "300px",
"opacity":"1"
});
这样test div的height、width、opacity是同时变化的，有时候我们不希望同步执行，而是形状的变化和透明度的变化分开，先变成300*300的div，然后透明度再逐渐变化，我们需要这么写
$('#test').animate({
"width": "300px",
"height": "300px",
}, function () {
$('#test').animate({ "opacity": "1" });
});
同学们可以想象一下要是有十个动画流程，那代码是什么样的，queue()和dequeue()可以解决此类问题，为所有的流程方法见一个队列，让function依次调用，先看一下语法
queue( [queueName ], newQueue ) 操作欲执行队列方法
第一个参数是队列名称，不写的话默认是fx
第二个参数可以是一个函数数组，存放所有队列函数，也可以是一个回掉函数，用于向队列中添加新函数
dequeue( [queueName ] ) 为匹配元素执行队列中的下一个function
每次调用此方法执行队列中下一函数
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的，每个动画都执行回掉函数，调用队列中下一个方法，两个动画依次执行，如果在执行期想再添加某个函数可以这样
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，是否立即执行完动画
如果想停止刚才动画可以这么写
这样写不会不会终止动画，只是当前动画执行完后，不会再调用队列中下一个动画（队列被清空了嘛，没有下一个了），如果想立即停止动画，可以这么写
至于停止动画是暂停还是立即执行完，就学要配置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
fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()
fadeIn()/ fadeOut()/ fadeToggle() 的用法和slide系列类似，不再一一说明，只不过这三个函数修改的时元素的透明度，fadeOut()函数在执行完后会将元素opacity复原，并把display属性设为none
fadeTo( duration, opacity [, easing ] [, complete ] ) fadeTo()方法就没有那么复杂了，但是fadeTO()的duration和opacity不是可省略的，必须写
show()/ hide()/ toggle()
这三个函数的用法和slide系列一样，但是在效果上有几点儿不同
1.如果参数duration不写，那么回立即执行没有动画
2.这个动画同时修改height、width、opacity属性
3.hide()执行完成后会将height、width、opacity属性还原，并把display设为none
animate()
有些复杂的动画靠上面几个函数不能够实现，这时候就是强大的animate派上用场的时候了,animate()有两种用法
.animate( properties [, duration ] [, easing ] [, complete ] )
大部分属性都不用解释，properties是个json，属性的值可以是字面量、function、”toggle”、简单表达式，如果是function会把返回值赋给属性，熟悉jQuery的同学肯定明白“toggle”是什么，就是让一个属性在初始值和最小值之间切换，能够使用toggle的属性有width、height、opacity等包含数字值属性，简单表达式是+=、-=等，比如可以这么些 “width”:”+=10px”。
$( "#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好用，上面这几个配置是不是很熟悉呢
$( "#book" ).animate({
width: "toggle",
height: "toggle"
}, {
duration: 5000,
specialEasing: {
width: "linear",
height: "easeOutBounce"
},
complete: function() {
$( this ).after( "<div>Animation complete.</div>" );
}
});
hover()
严格说这个并不是个动画函数，但是由于低版本IE的hover对很多元素都不起作用，用CSS无法完成很多动作，所以经常需要使用JavaScript进行haver事件的处理。
.hover( handlerIn(eventObject), handlerOut(eventObject) )
方法很简单，不多介绍了，这样就能把mousein 和mouseout写在一起了。
栏 目：jquery
下一篇：IE8下Jquery获取select选中的值post到后台报错问题
本文标题：jQuery下的动画处理总结
本文地址：http://www.codeinn.net/misctech/55841.html
