jQuery基础使用(四)

205 阅读2分钟

(个人经验,仅供参考,错误之处,敬请谅解)

动画操作

一、隐藏与显示

  1. hide()
  2. show()
  3. toggle() 显示与隐藏的切换

二、上卷与下拉

  1. slideDown()
  2. slideUp()
  3. slideToggle() 上卷与下拉切换

三、淡入和淡出

  1. fadeIn()
  2. fadeOut()
  3. fadeToggle() 淡入与淡出切换

四、自定义动画

  1. animate( properties, options )

options参数
duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数
step:规定每个动画的每一步完成之后要执行的函数
progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念
complete:动画完成回调

如果多个元素执行动画,回调将在每个匹配的元素上执行一次,不是作为整个动画执行一次

  1. stop()

stop(); 停止当前动画,点击在暂停处继续开始
stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值

五、动画的切换

toggle与slideToggle细节区别:
toggle:动态效果为从右至左。横向动作,toggle通过display来判断切换所有匹配元素的可见性
slideToggle:动态效果从下至上。竖向动作,slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。
元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。
(隐藏的元素不会被完全显示)