JQuery动画效果

xiaoxiao2021-02-28  100

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,动画队列

转载请注明原文地址: https://www.6miu.com/read-61371.html

最新回复(0)