首页 小组 问答 话题 好文 素材 用户 唠叨 我的社区

[分享]浅谈jQuery中的动画

九秘Lv.1种子选手
2024-09-24 20:50:15
0
42

显示与隐藏

  • show(speed,callback)

speed:动画执行的时长,单位为毫秒
callback:动画执行完毕后的回调函数

  • hide(speed,callback)

speed:动画执行的时长,单位毫秒
callback:动画执行完毕后的回调函数

滑动式动画

  • slideUp()和slideDown()

没有无动画版本(底层代码预定义动画执行的时长),改变指定元素的高度,括号里面的参数同样传时长,单位毫秒

淡入淡出动画

  • fadeOut()和fadeIn()

括号里的参数接收一个时长,单位为毫秒

动画切换

  • fadeToggle()

括号里的参数接收一个时长,单位为毫秒

自定义动画

  • animate()方法:自定义动画

1.animate(properties,duration,callback)
properties:表示css的样式属性,设置动画执行结束的样式属性值
duration:表示动画执行的时长,单位为毫秒
callback:表示动画执行完毕后的回调函数
2.animate(properties,options)
properties:表示css的样式属性,设置动画执行结束的样式属性值
options:表示设置动画的相关参数
duration:表示动画执行的时长,单位为毫秒
complete:表示动画执行完毕后的回调函数
queue:布尔值,设置是否添加到动画队列中

  • 并发与排队效果

并发效果:就是指多个动画同时执行,多个CSS的样式属性值同时改变,动画多个值综合效果
排队效果:就是指多个动画按照定义的先后顺序执行,多个CSS的样式属性值先后改变
queue:用于控制当前的动画效果是并发还是排队效果

  • 停止执行动画

stop()方法没有接收任何参数时:立即停止执行动画
stop(queue)方法的第一个参数
fasle:表示停止当前动画,但队列中的动画继续执行
true:表示停止当前动画,并且清空动画队列
stop(queue,gotoEnd)方法的第二个参数
false:不会做任何处理
true:表示停止当前动画,并且将指定元素设置为动画执行完毕后的样式

  • 延迟执行动画,delay()

语法结构如下

$('div').animate({
    left:***
},3000).delay(1000).animate({
    top:600
},3000);
九秘
九秘

18 天前

签名 : 我常驻在>https://www.huaqu.club/ask   42       0
评论
站长交流