jQuery(四)动画部分

jQuery 动画部分

1. 隐藏显示

  • .hide()

    • .hide(options)
      提供hide方法一个参数时,.hide()就会成为一个动画方法,进行动画操作

    • .hide(“fast/slow”)
      这是一个动画设置的快捷方式,元素会执行200/600毫秒的动画后再隐藏

  • .show()

    • .show(options)
      提供show方法一个参数时,.show()就会成为一个动画方法,进行动画操作

    • .show(“fast/slow”)
      这是一个动画设置的快捷方式,元素会执行200/600毫秒的动画后再显示

  • .toggle()
    如果元素是最初显示,它会被隐藏。如果是隐藏的,它会显示出来

    • .toggle([duration] [,complete])

    • .toggle(display)

2. 上卷下拉

  • .slideDown()
    该方法给匹配元素的高度的动画(下滑)

    • .slideDown([duration] [,complete])
  • .slideUp()
    该方法给匹配元素的高度的动画(上滑)

    • .slideUp([duration] [,easing] [,complete])
  • .slideToggle()
    该方法给匹配元素的高度的动画(上滑或下滑)

    • .slideToggle([duration] [,complete])

3. 淡入淡出

  • .fadeOut()
    隐藏所有匹配的元素,并带有淡出的过渡动画效果

    • .fadeOut([duration] [,complete])
  • .fadeIn()
    显示所有匹配的元素,并带有淡入的过渡动画效果

    • .fadeIn([duration] [,complete])
  • .fadeToggle()
    切换fadeOut与fadeIn效果,所谓”切换”,即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。

    • .fadeToggle([duration] [,complete])
  • .fadeTo()
    将匹配的元素过渡到指定的opacity值

    • .fadeTo(duration, opacity, callback)

4. 自定义动画

  • .animate(properties, [duration], [easing], [complete])

    • properties
      一个或多个css属性的键值对所构成的Object对象,注意所有用于动画的属性必须是数字的
    • duration
      动画的执行时间,以毫秒为单位,值越大表示动画执行的越慢
    • easing
      jQuery库默认调用swing,如果需要其他动画,请查找相关插件
    • complete
      动画完成时执行的函数,在当前动画确认完成后触发
  • .animate(properties, options)

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

    • .stop()
      停止第一个动画,继续执行后续动画
    • .stop(true)
      停止所有动画,暂停在当前状态
    • .stop(true, true)
      直接调到当前动画的最终状态,后续的动画全部暂停

5. jQuery核心

  • .each()
    由于jQuery的实例是一个元素集合,所以大部分jQuery方法在内部都会调用each

    • jQuery.each(array, callback)
    • jQuery.each(object, callback)

    jQuery.each()函数会根据每次调用函数callback的返回值来决定后续动作,如果返回值为false,则停止循环

  • .inArray()
    查找数组中的索引

    • .inArray(value, array, [fromIndex])
      若存在,返回对应的索引值,所不存在,返回-1
  • .trim()
    用于去除字符串两端的空白字符

    • 移除字符串开始和结尾处的所有换行符,空格(包括连续的空格)和制表符(tab)
    • 如果这些空白字符在字符串中间时,它们将会被保留,不会被移除
  • .get()
    用于单独操作元素集合中的某一元素

    • .get([index])
  • .index()
    从匹配的元素中搜索给定元素的索引值,从0开始计数

    • .index()
      返回jQuery对象中第一个元素相对于它同辈元素的位置
    • .index(selector)
      返回传入的元素相对于 原先 集合的位置
    • .index(element)
      返回原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1