浅谈jQuery之动画

背景

jQuery提供了JS未能提供的动画效果，利用jQuery的动画效果，可以极大的简化JS动画部分的逻辑

滑入滑出动画

滑入动画

定义：以下拉方式动画效果将html内容显示出来

使用方式：

$(selector).slideDown(time,function)

$(selector).slideDown(2000)

$(selector).slideDown()

$(selector).slideDown(fast/normal/slow)

time代表执行动画的时间，function代表动画执行完之后所要执行的函数

滑出动画

定义：以上滑方式动画效果将html内容隐藏出来

使用方式：

$(selector).slideUp(time,function)

$(selector).slideUp(2000)

$(selector).slideUp()

$(selector).slideUp(fast/normal/slow)

time代表执行动画的时间，function代表动画执行完之后所要执行的函数

滑入滑出切换动画

定义：在滑入滑出动画间切换

使用方式：

$(selector).slideToggle(time,function)

$(selector).slideToggle(2000)

$(selector).slideToggle()

$(selector).slideToggle(fast/normal/slow)

淡入淡出动画

淡入动画

作用：让元素以淡淡的进入视线的方式展现出来

使用方式

$(selector).fadeIn(time,function)

$(selector).fadeIn(2000)

$(selector).fadeIn()

$(selector).fadeIn(fast/normal/slow)

淡出动画

作用：让元素以淡淡的离开视线的方式隐藏起来

使用方式

$(selector).fadeOut(time,function)

$(selector).fadeOut(2000)

$(selector).fadeOut()

$(selector).fadeOut(fast/normal/slow)

淡入淡出切换动画

作用：让元素在淡入淡出动画切换

使用方式

$(Selector).fadeToggle(time,function)

$(selector).fadeToggle(2000)

$(selector).fadeToggle()

$(selector).fadeToggle(fast/normal/slow)

修改opacity

作用： 修改opacity的值

使用方式

$(Selector).fadeTo(time,opacity,function)

time可以是字符串，可以是具体数字

也可只有参数一、参数二

显示隐藏动画

显示动画

作用： 将Html结构显现出来

使用方式

$(Selector).show(time，function)

$(selector).show(2000)

$(selector).show()

$(selector).show(fast/normal/slow)

隐藏动画

作用： 将Html结构隐藏起来

使用方式

$(Selector).hide(time，function) 

$(selector).hide(2000)

$(selector).hide()

$(selector).hide(fast/normal/slow)

停止动画

定义：停止正在执行的动画

使用方式：

$(selector).stop()

stop()中可以有两个参数，参数一：后续动画是否执行，参数二：当前动画是否执行完毕，默认的是（false,false),注意第一个参数，true代表的是后续动画不执行

————————————————————————————

第一种:(false，false)

后续动画会执行，当前动画不会执行完

第二种:(false，true)

后续动画会执行，当前动画会执行完

第三种:(true，false)

后续动画不会执行，当前动画不会执行完

第四种:(true，true)

后续动画不会执行，当前动画会执行完

自定义动画

作用：执行一组CSS属性的自定义动画

使用方式：

$(selector).animate({CSS定义},time,function())

阅读全文