jQuery动画效果

动画效果之一

隐藏和显示

 

hide() 和 show()

 

• 使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
• hide() 和 show() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数

 

 toggle()方法

• 切换 hide() 和 show() 方法
• toggle() 可以携带两个可选参数，一个是speed参数另外一个是callback参数

注：  hide() 和 show()可同时修改多个样式属性，如:高度、宽度、不透明度

 

动画效果之二

淡入淡出

 

fadeIn()和fadeOut()

 

• fadeIn() 用于淡入已隐藏的元素，fadeOut() 方法用于淡出可见元素
• fadeIn() 和 fadeOut() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数

 

fadeToggle() 方法

 

• 可以在 fadeIn() 与 fadeOut() 方法之间进行切换

    fadeTo() 方法

• 允许渐变为给定的不透明度（值介于 0 与 1 之间）

注：fadeIn()和fadeOut()只改变不透明度

 

动画效果之三

展开和收起

 

 slideDown()和slideUp()

 

• slideDown() 方法用于向下滑动元素，slideUp() 方法用于向上滑动元素
• slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
• slideToggle() 方法
• slideDown() 和 slideUp() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数

注：slideDown()和slideUp()只改变高度

 

动画效果之四

自定义动画

 

使用animate()方法来自定义动画停止动画

使用stop()方法来停止动画