码海拾遗

但行好事,莫问前程

导航

动画效果

网页中的特效,一般都是用JavaScript编写的

显示与隐藏

  显示方法:show([speed,callback])

    无参数情况下,只能硬性显示,没有动画效果

    speed:动画速度,以毫秒为单位

    callback:回调函数,当显示效果完成后,调用

  隐藏方法:hide([speed,callback])

    无参数情况下,只能硬性隐藏,没有动画效果

    speed:动画速度,以毫秒为单位

    callback:回调函数,当隐藏效果完成后,调用

  逐个显示

    object.first().show(800,function callback(){

      $(this).next().show(800,callback());

    })

  逐个隐藏

    object.last().hide(800,function callback(){

      $(this).prev().hide(800,callback());

    })

  隐藏兼显示:toggle([speed,callback,bool])

    无参情况下硬性显示或隐藏

    speed:动画速度,以毫秒为单位

    callback:回调函数,当隐藏效果完成后,调用

    bool:规定 toggle 是否隐藏或显示所有被选元素     

      • True - 显示所有元素
      • False - 隐藏所有元素

滑动显示与隐藏

  显示方法:slideDown([speed,callback])

    无参数情况下,以默认速度显示

    speed:动画速度,以毫秒为单位

    callback:回调函数,当显示效果完成后,调用

  隐藏方法:slideUp([speed,callback])

    无参数情况下,只能硬性隐藏,没有动画效果

    speed:动画速度,以毫秒为单位

    callback:回调函数,当隐藏效果完成后,调用

  隐藏兼显示:slideToggle([speed,callback])

    无参情况下硬性显示或隐藏

    speed:动画速度,以毫秒为单位

    callback:回调函数,当隐藏/显示效果完成后,调用

淡入与淡出

  淡入方法:fadeIn([speed,callback])

    无参数情况下,以默认速度显示

    speed:动画速度,以毫秒为单位

    callback:回调函数,当显示效果完成后,调用

  淡出方法:fadeOut([speed,callback])

    无参数情况下,只能硬性隐藏,没有动画效果

    speed:动画速度,以毫秒为单位

    callback:回调函数,当隐藏效果完成后,调用

  淡入兼淡出:fadeToggle([speed,callback])

    无参情况下硬性显示或隐藏

    speed:动画速度,以毫秒为单位

    callback:回调函数,当隐藏效果完成后,调用

  改变透明度:fadeTo(speed,opacity[,callback])

    speed:动画速度,以毫秒为单位

    opacity:透明度改变范围,0~1

    callback:回调函数,当改变透明度效果完成后,调用

自定义动画

  方法:animate({

      key1:value1,

      key2:value2,...

      }[,speed,easing,callback])

    key:value:CSS样式键值对

    speed:动画速度

    callback:回调函数,动画效果完成后,调用

    easing:动画运动效果,参数为swing时,动画缓速运动,即中间快,两边慢;参数为linear时,动画匀速运动

    可在value前加"+="或"-=",使其累增或累减

列队动画:调用动画的函数按顺序执行

  方法:JQurey自定义动画函数

    使用嵌套的回调函数,函数将按顺序执行

    使用连缀和顺序执行,实现列队动画,对象为同一个

动画方法

  stop(clearQueue,gotoEnd):

    没有参数的情况下,停止列队动画的第一个动画,余下动画继续执行

    第一个参数为true时,停止列队动画,并清空余下的动画

    第二个参数为true时,直接将正在执行的列队动画跳到末状态

  delay(time):设置时间延迟效果

  :animated:查找正在执行的动画,$(":animated")表示正在执行的动画

全局属性

  $.fx.interval:设置动画的帧数,默认为13

  $.fx.off:关闭动画,默认为false

    

posted on 2015-05-18 06:52  widrin  阅读(406)  评论(0编辑  收藏  举报