1.用jQuery做动画效果要求在标准模式下,否则可能引起动画抖动,标准模式要求文件头部包含DTD定义:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.使用stop()方法可以停止正在执行的动画,然后去执行下一个动画;当一个元素绑定了hover事件后,移入有动画执行,移出动画结束,光标移入移出频率过快,会导致动画效果与光标不一致,这时加入stop()方法,就可以解决问题;stop()方法第一个参数clearQueue设置为true时,程序会把当前元素接下来尚未执行完的动画队列清空,去执行下一个动画队列;第二个参数gotoEND设置为true可以让正在进行的动画直接结束状态(通常用与后一个动画要基于前一个动画的末状态);
动画队列:
一组元素:在animate中个设定多个属性,动画时同时发生的;在链式写法中,动画时按顺序发生的;
多组元素:默认情况下,动画同时发生,以回调方式应用动画时,动画是按回调顺序发生;
3.当用户快速地在某个元素上执行animate()动画时,会出现动画积累,判断该元素是否处于动画状态,
is(":animated")
再来决定是否添加新的动画效果,就可以解决该问题。
4.常用动画方法:
hide(),show() | 同时修改多个样式属性(高度,宽度,透明度) |
fadeIn(),fadeOut() | 改变不透明度, |
slideUp(),slideDown() | 改变高度 |
fadeTo() | 把透明度改到某个特定的值 |
toggle() | 切换效果,代替hide()和show() |
slideToggle() | 用来代替slideUp(),slideDown() |
fadeToggle() | 用来代替fadeIn(),fadeOut() |
animate() | 自定义动画效果 |
delay() | 延迟动画 |