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表示一个字符串(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。
不带参数时,删除队列最顶部的函数,并执行继续这个队列函数。