浅谈jQuery中的动画

显示与隐藏

  • 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:800
},3000).delay(1000).animate({
    top:600
},3000);
    原文作者:庄国琳
    原文地址: https://segmentfault.com/a/1190000016342775
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞