码迷,mamicode.com
首页 > Web开发 > 详细

jQuery动画效果

时间:2019-10-06 13:21:40      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:wing   lock   技术   near   ade   swing   alt   清除   参数   

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效果函数都可以设置动画完成时的回调

jQuery动画效果

标签:wing   lock   技术   near   ade   swing   alt   清除   参数   

原文地址:https://www.cnblogs.com/OrochiZ-/p/11626831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!