jQuery任何动画都能指定3种速度参数"slow","normal","fast"(时间分别是0.6s 0.4s 0.2s),使用该3参数时必须加引号。另外还可以使用数字作为时间参数,例如show(1000)。
1、show()和hide()方法
show()方法 最后将元素的display属性设置为block。
hide()方法 最后将元素的display属性设置为none。
如果不给参数,就是直接将元素隐藏或显示,不会有任何动画。
如果给这2个方法设置参数 会出现一个宽度、高度和透明度分别同时改变的动画效果。
2、fadeIn()和fadeOut()方法 只改变透明度的动画效果
fadeIn()方法 元素的opacity从0到1直到显示的动画过程。
fadeOut()方法 元素的opacity从1到0直到完全消失的动画过程。
3、slideUp()和slideDown()方法 通过改变高度实现动画效果
slideDown() 从上到下过渡显示
slideUp() 从下到上过渡隐藏
4、animate() 自定义动画
animate(params, speed, callback); 可以用animate()方法来操作几乎所有的css属性。但是属性名要使用驼峰写法比如fontSize而不是连字符"-",另外色彩动画不包含在jquery核心库中
params一个包含样式属性和值的映射 {"property1":"value1", "property2:"value2", "propertyN":"valueN"}。
speed 效果的时长。
callback 动画完成之后的回调函数。
当一个元素上应用多个属性时,动画是同时进行的 ;当同时编写多个animate()调用,jQuery会创建包含这些调用的队列,然后逐一运行这些调用。
使用animate()方法过程中可能由于操作过快,导致动画衔接脱节,一般会加一个stop()方法比如$("element").stop().animate();
如果想对动画进行延迟操作,提供了一个delay()方法 $("element").delay(1000).animate();
5、stop()停止动画
stop([clearQueue] [gotoEnd]) 两个参数都是可选的,都为Boolean值(true 或 false)。
clearQueue: 清除当前队列动画。
gotoEnd: 将正在执行的动画跳转到末尾状态。
6、如果判断页面上元素是否处于动画状态呢 if($("element").is(":animated")) { };
注: callback回调函数适用于jQuery所有动画方法。