(个人经验,仅供参考,错误之处,敬请谅解)
动画操作
一、隐藏与显示
- hide()
- show()
- toggle() 显示与隐藏的切换
二、上卷与下拉
- slideDown()
- slideUp()
- slideToggle() 上卷与下拉切换
三、淡入和淡出
- fadeIn()
- fadeOut()
- fadeToggle() 淡入与淡出切换
四、自定义动画
- animate( properties, options )
options参数
duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数
step:规定每个动画的每一步完成之后要执行的函数
progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念
complete:动画完成回调
如果多个元素执行动画,回调将在每个匹配的元素上执行一次,不是作为整个动画执行一次
- stop()
stop(); 停止当前动画,点击在暂停处继续开始
stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值
五、动画的切换
toggle与slideToggle细节区别:
toggle:动态效果为从右至左。横向动作,toggle通过display来判断切换所有匹配元素的可见性
slideToggle:动态效果从下至上。竖向动作,slideToggle 通过高度变化来切换所有匹配元素的可见性
fadeToggle方法
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。
元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。
(隐藏的元素不会被完全显示)