JQuery 动画设计

1.CSS动画设计基础

css(propertyName)

css(propertyName,value)

css(propertyName,function(index,value))

css(map)

propertyName表示一个css属性名，以字符串形式表示，当css方法只包含该属性时，表示为匹配的元素集合中获取第一个元素的样式属性值。

value表示一个css属性值。

function(index,value)是一个返回设置值的函数，参数可以接收元素的索引位置和元素旧的样式属性值。

map表示一个名值对的对象，利用该对象可以为匹配的元素设置多个CSS属性。

2.显隐动画

2.1.显示与隐藏

show/hide()

show/hide(duration,[callback])

show/hide([duration],[easing],[callback])

duration表示一个字符串（slow,normal,fast）或数字，决定动画将运行多久。

callback表示在动画完成时执行的函数。

easing表示使用哪个缓冲函数用来过渡的字符串。

2.2.显隐切换

toggle([duration],[callback])

toggle([duration],[easing],[callback])

toggle(showOrHide)

showOrHide是一个Boolean值，表示显示/隐藏。

duration表示一个
4000
字符串（slow,normal,fast）或数字，决定动画将运行多久。

callback表示在动画完成时执行的函数。

easing表示使用哪个缓冲函数用来过渡的字符串。
不带任何参数时，将根据元素的当前状态切换其可见性。

3.滑动动画

3.1.显隐滑动效果

slideDown/slideUp([duration],[callback])

slideDown/slideUp([duration],[easing],[callback])

duration表示一个字符串（slow,normal,fast）或数字，决定动画将运行多久。

callback表示在动画完成时执行的函数。

easing表示使用哪个缓冲函数用来过渡的字符串。

3.2.滑动切换

slideToggle([duration],[callback])

slideToggle([duration],[easing],[callback])

duration表示一个字符串（slow,normal,fast）或数字，决定动画将运行多久。

callback表示在动画完成时执行的函数。

easing表示使用哪个缓冲函数用来过渡的字符串。

4.渐变效果

4.1.淡入淡出

fadeIn/fadeOut([duration],[callback])

fadeIn/fadeOut([duration],[easing],[callback])

duration表示一个字符串（slow,normal,fast）或数字，决定动画将运行多久。

callback表示在动画完成时执行的函数。

easing表示使用哪个缓冲函数用来过渡的字符串。

4.2.设置淡出透明效果

fadeTo(duration,opacity,[callback])

fadeTo([duration],opacity,[easing],[callback])

duration表示一个字符串（slow,normal,fast）或数字，决定动画将运行多久。

callback表示在动画完成时执行的函数。

easing表示使用哪个缓冲函数用来过渡的字符串。
opacity是一个0~1之间的数字，表示透明度。

4.3.渐变切换

fadeToggle([duration],[callback])

fadeToggle([duration],[easing],[callback])

duration表示一个字符串（slow,normal,fast）或数字，决定动画将运行多久。

callback表示在动画完成时执行的函数。

easing表示使用哪个缓冲函数用来过渡的字符串。

5.复杂动画

5.1.自定义动画

animate(properties,options)

animate(properties,[duration],[easing],[callback])

properties表示一组CSS属性，动画将向这组属性移动。

duration表示一个字符串（slow,normal,fast）或数字，决定动画将运行多久。

callback表示在动画完成时执行的函数。

easing表示要使用的擦除效果的名称。

options表示一组包含动画选项的值的集合，选项：duration：表示速度的字符串或数字；easing：要用的擦出效果的名称；complete：动画完成时执行的函数；step：每步动画执行后执行的函数；queue：默认为true，为false时表示此动画不进入动画队列；specialEasing：一组一个或多个通过相应的参数和相对简单函数定义的CSS属性。

5.2.停止/关闭动画

stop([clearQueue],[jumpToEnd])

clearQueue是一个Boolean值，表示是否取消队列动画，默认false。

jumpToEnd是一个Boolean值，表示是否立即完成当前动画，默认false。

jQuery.fx.off
= true/false      关闭/开启所有JQuery，动画自然不起效果了。

5.3.设置动画频率

jQuery.fx.interval
= time       time以毫秒为单位。

5.4.延迟动画

delay(duration,[queueName])

queueName是一个队列名字符串，默认是动画队列fx。

duration表示一个字符串（slow,normal,fast）或数字，决定动画将运行多久。

6.动画队列

6.1.添加动画队列

queue(element,queueName,newQueue)

queue(element,queueName,callback())

element是一个DOM元素。

queueName是一个队列名字符串，默认是动画队列fx。

newQueue是一个替换当前函数队列内容的数组。

callback()是添加到队列的函数。

6.2.显示动画队列

queue(element,[queueName])

element是一个DOM元素。

queueName是一个队列名字符串，默认是动画队列fx。

6.3.删除动画队列

dequeue([queueName])

queueName是一个队列名字符串，默认是动画队列fx。

不带参数时，删除队列最顶部的函数，并执行继续这个队列函数。