jQuery效果动画方法

效果动画

隐藏和显示

hide()

隐藏被选元素

  1. speed

    • 可选 : 规定隐藏效果的速度。值:毫秒,slow(缓慢),fast(快速);

  2. easing

    • 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

  3. callback

    • 可选。hide() 方法执行完之后，要执行的函数。

show() 显示

  1. speed

    • 可选 : 规定显示效果的速度。值:毫秒,slow(缓慢),fast(快速);

  2. easing

    • 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

  3. callback

    • 可选。show() 方法执行完之后，要执行的函数。

toggle()

隐藏和显示之间的切换

  1. speed

    • 可选 : 规定隐藏/显示效果的速度。值:毫秒,slow(缓慢),fast(快速);

  2. easing

    • 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

  3. callback

    • 可选。toggle() 方法执行完之后，要执行的函数。

淡入淡出效果

  1. 淡入效果

    • fadeOut( )

      speed : 可选 : 规定淡入效果的速度。值:毫秒,slow(缓慢),fast(快速);

      easing:可选。规定在动画的不同点上元素的速度。默认值为 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

      callback:可选。fadeIn() 方法执行完之后，要执行的函数。

  2. 淡出效果

    • fadeIn( )

      speed : 可选 : 规定淡出效果的速度。值:毫秒,slow(缓慢),fast(快速);

      easing:可选。规定在动画的不同点上元素的速度。默认值为 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

      callback:可选。fadeIn() 方法执行完之后，要执行的函数。

  3. 淡入淡出效果

    • fadeToggle( )

      speed : 可选 : 规定淡入淡出效果的速度。值:毫秒,slow(缓慢),fast(快速);

      easing:可选。规定在动画的不同点上元素的速度。默认值为 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

      callback:可选。fadeToggle() 方法执行完之后，要执行的函数。

  4. 透明度改变

    • fadeTo()

      speed : 可选 : 规定透明效果的速度。值:毫秒,slow(缓慢),fast(快速);

      opacity : 必选 规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。

      easing:可选。规定在动画的不同点上元素的速度。默认值为 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

      callback:可选。fadeToggle() 方法执行完之后，要执行的函数。

滑动效果

  1. 滑动显示

    • slideDown()

      speed : 可选 : 规定滑动显示效果的速度。值:毫秒,slow(缓慢),fast(快速);

      easing:可选。规定在动画的不同点上元素的速度。默认值为 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

      callback:可选。slideDown() 方法执行完之后，要执行的函数。

  2. 滑动隐藏

    • slideUp()

      speed : 可选 : 规定滑动隐藏效果的速度。值:毫秒,slow(缓慢),fast(快速);

      easing:可选。规定在动画的不同点上元素的速度。默认值为 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

      callback:可选。slideUp() 方法执行完之后，要执行的函数。

  3. 滑动隐藏显示

    • slideToggle()

      speed : 可选 : 规定滑动隐藏显示效果的速度。值:毫秒,slow(缓慢),fast(快速);

      easing:可选。规定在动画的不同点上元素的速度。默认值为 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

      callback:可选。slideToggle() 方法执行完之后，要执行的函数。

动画

animate()

执行 CSS 属性集的自定义动画

  1. styles

    必需。规定产生动画效果的一个或多个 CSS 属性/值

    • backgroundPositionX (背景定位 X 轴)
    • backgroundPositionY (背景定位 Y 轴)
    • borderWidth (边框宽度)
    • borderBottomWidth (下边框宽度)
    • borderLeftWidth (左边框宽度)
    • borderRightWidth (右边框宽度)
    • borderTopWidth (上边框宽度)
    • borderSpacing (边框间距)
    • margin (外边距)
    • marginBottom (下外边距)
    • marginLeft (左外边距)
    • marginRight (右外边距)
    • marginTop (上外边距)
    • outlineWidth (轮廓宽度)
    • padding (内边距)
    • paddingBottom (下内边距)
    • paddingLeft (左内边距)
    • paddingRight (右内边距)
    • paddingTop (上内边距)
    • height (高度)
    • width (宽度)
    • maxHeight (最大高度)
    • maxWidth (最大宽度)
    • minHeight (最小高度)
    • minWidth (最小宽度)
    • fontSize (字体大小)
    • bottom (下)
    • left (左)
    • right (右)
    • top (上)
    • letterSpacing (字符之间的间距)
    • wordSpacing (单词之间的间距)
    • lineHeight (行高)
    • textIndent (文本第一行缩进)

  2. speed

    可选。规定动画的速度。值:毫秒,slow(缓慢),fast(快速);

  3. easing

    可选。规定在动画的不同点中元素的速度。默认值是 "swing"。值:swing(在开头/结尾移动慢，在中间移动快),linear(匀速)

  4. callback

    可选。animate 函数执行完之后，要执行的函数。

其他动画效果

停止动画

  • stop()

    停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行

延时延迟执行动画

  • delay()
    1. duration

      duration 延时时间，单位：毫秒
      queueName 队列名词，默认是Fx，动画队列。

finish()

> 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画.

jQuery.fx.off

  > jQuery.fx.off = true;关闭页面上所有的动画。
  > jQuery.fx.off = false;重新开启所有动画
posted @ 2020-12-02 11:50  云鹤^  阅读(115)  评论(0)    收藏  举报