jQuery动画操作

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() 延迟动画

                                                    

猜你喜欢

转载自blog.csdn.net/Gbing1228/article/details/88012691