jQuery动画效果

Posted 2022-12-29 orochiz-

1.显示/隐藏/切换

语法：show(duration,cb)/hide(duration,cb)/toggle(duration,cb)
参数一：动画时长，默认为0，即没有动画效果，所以一定要传。传递的参数有以下可能值：
数值：单位ms 例如 show(1000)
关键字：fast/normal/slow 相当于数值的 200/400/600 例如show(‘fast‘)
参数二（可选）：动画完成后执行的回调函数

注意：这个方法的最终效果相当于将内联样式的display设置为block/none

$("a").show('fast') //动画持续200毫秒
$("a").hide(600) //动画持续600毫秒
$("a").toggle() //不传递持续时间没有动画效果
$("a").toggle('xxx') //关键字错误，相当于传递了normal

2.滑入/滑出/切换

元素切换为显示时对应滑入，元素切换为隐藏时对应滑出
语法：slideDown(duration,cb)/slideUp(duration,cb)/slideToggle(duration,cb)
参数一：动画时长，默认为400，即normal。传递的参数有以下可能值：
数值：单位ms 例如slideDown(1000)
关键字：fast/normal/slow 相当于数值的 200/400/600 例如slideDown(‘fast‘)
参数二（可选）：动画完成后执行的回调函数

注意：这个方法的最终效果相当于将内联样式的display设置为block/none

$("a").slideDown('fast') //动画持续200毫秒
$("a").slideUp(600) //动画持续600毫秒
$("a").slideToggle() //不传递持续时间默认400ms
$("a").slideToggle('xxx') //关键字错误，相当于传递了normal

3.淡入/淡出/切换

语法：fadeIn(duration,cb)/fadeOut(duration,cb)/fadeToggle(duration,cb)
参数一：动画时长，默认为400，即normal。传递的参数有以下可能值：
数值：单位ms 例如fadeIn(1000)
关键字：fast/normal/slow 相当于数值的 200/400/600 例如fadeIn(‘fast‘)
参数二（可选）：动画完成后执行的回调函数

注意：这个方法的最终效果相当于将内联样式的display设置为block/none

$("a").fadeIn('fast') //动画持续200毫秒
$("a").fadeOut(600) //动画持续600毫秒
$("a").fadeToggle() //不传递持续时间默认400ms
$("a").fadeToggle('xxx') //关键字错误，相当于传递了normal

4.淡入程度 fadeTo()

这个方法操作的是opacity属性，相当于给这个属性设置了新的值，还添加了过渡效果
语法：fadeTo()
参数一：必需，动画时长，传递的参数是数字，也可以是关键字
参数二：必需，opacity的值
参数三：可选，时间曲线,默认"swing"- 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动
参数四：可选，动画完成后的回调函数

$("a").fadeTo('slow',0)
$("a").fadeTo(800,1)
$("a").fadeTo(1000,0.5,"swing")
$("a").fadeTo(1000,1,"linear")

5.清除动画队列 stop()

作用：如果一个元素的动画队列未完成，又触发了下一个动画队列，默认就会 “积压” 很多动画队列。例如;

上图中因为连续多次点击了按钮，导致 “积压” 很多动画队列。我们不希望这样，我们想要的是触发新的动画时就清除前面的动画列队，而不会积压下去。
所以就要考虑两个因素：
一：是否要清除前面的队列？
二：从何处开始新的动画？我们触发新的动画效果的时候，上个动画还在进行中，并未完成。新的动画是从当前帧开始还是最终帧开始？

stop()方法的两个参数描述的就是这两个问题：
参数一：可选。是否清除队列。默认是 false。
参数二：可选。是否从最后效果开始新的动画。默认是 false。

实例：清除队列，但从当前帧开始新的动画

$("a").stop(true).slideToggle(2000)

实例2：清除队列，但从最终帧开始新的动画

$("a").stop(true,rue).slideToggle(2000)

6.自定义动画 animate()

7.回调函数

jquery效果函数都可以设置动画完成时的回调