JQuery动画效果

来源:互联网 发布:2016淘宝卖家避开同款 编辑:程序博客网 时间:2024/06/16 23:19

JQuery基本动画效果

show([speed,[easing],[fn]])显示选择的元素
hide([speed,[easing],[fn]])隐藏选择的元素
toggle([speed,[easing],[fn]])切换选择的元素
参数:speed:可以选择给定的三种预定值:"slow","normal",or "fast"

               表示动画时长的毫秒数值(如:1000)完成效果持续的时间

         easing:动画效果,默认两个:swing/linear,需要更多就通过插件easing.js支持

         fun:回调函数,等动画效果执行完毕后,立马执行的函数function

JQuery滑动动画效果

slideDown([speed,[easing],[fn]]):向下滑动展示元素
slideUp([speed,[easing],[fn]]):向上滑动隐藏元素
slideToggle([speed,[easing],[fn]]):通过滑动方式展示和隐藏元素

JQuery淡入淡出效果

fadeIn([[speed],[easing],[fn]]):通过设置透明度方式对指定元素淡入效果实现
fadeOut([[speed],[easing],[fn]])通过设置透明度方式对指定元素淡出效果实现
fadeTo([[speed],opacity,[easing],[fn]]):把指定元素的透明度值,设置到指定的值
fadeToggle([[speed],[easing],[fn]]):切换指定元素的淡入淡出效果

自定义动画

animate(params,[speed],[easing],[fn])
作用:设置属性从当前属性值到指定值的过度切换过程
参数说明:params:需要变化的一组属性集合,格式JSON

  speed:可以选择给定的三种预定值:"slow","normal",or "fast"

                   表示动画时长的毫秒数值(如:1000)完成效果持续的时间

  easing:动画效果,默认两个:swing/linear,需要更多就通过插件easing.js支持

            fn:回调函数,等动画效果执行完毕后,立马执行的函数function

注意:属性名必须要驼峰式,如:marginLeft替换margin-left

      不支持color类型属性的渐变动画

其他函数分析

stop([clearQueue],[jumpToEnd])
作用:停止所有作用在当前对象上的动画效果
参数分析:clearQueue:立即停止当前动画,并确定是否清空队列(true为立马停止动画并清空队列)

  jumpToEnd:停止动画的时候,是否完成动画和完成队列(true为立刻完成动画和队列)

delay(duration,[queueName])
作用:设置一个延时来推迟执行队列中之后的项目
参数分析:duration:延时时间,单位:毫秒

  queueName:队列名词,默认是Fx,动画队列


原创粉丝点击