位置: 编程技术 - 正文
jQuery animate easing使用方法图文详解
编辑：rootadmin推荐整理分享jQuery animate easing使用方法图文详解，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
从jQuery API 文档中可以知道，jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数：
&#; properties：一组包含作为动画属性和终值的样式属性和及其值的集合
&#; duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：)
&#; easing(可选)：要使用的过渡效果的名称，如："linear" 或"swing"
&#; complete(可选)：在动画完成时执行的函数
其中参数easing默认有两个效果："linear"和"swing"，如果需要更多效果就要插件支持了，jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等多种效果，大家可以点击这里去看每一种easing的演示效果，下面详细介绍下其使用方法及每种easing的曲线图。
jQuery easing 使用方法
首先，项目中如果需要使用特殊的动画效果，则需要在引入jQuery之后引入jquery.easing.1.3.js
引入之后，easing参数可选的值就有以下种：
1. linear2. swing3. easeInQuad4. easeOutQuad5. easeInOutQuad6. easeInCubic7. easeOutCubic8. easeInOutCubic9. easeInQuart. easeOutQuart. easeInOutQuart. easeInQuint. easeOutQuint. easeInOutQuint. easeInExpo. easeOutExpo. easeInOutExpo. easeInSine. easeOutSine. easeInOutSine. easeInCirc. easeOutCirc. easeInOutCirc. easeInElastic. easeOutElastic. easeInOutElastic. easeInBack. easeOutBack. easeInOutBack. easeInBounce. easeOutBounce. easeInOutBounce
当 然一般一个项目中不可能会用到这么多效果，为了减少代码冗余，必要时可以不用引入整个jquery.easing.1.3.js，我们可以只把我们需要的 几种easing放入Javascript文件中，如项目中只用到"easeOutExpo"和"easeOutBounce"两种效果，只需要下面的代 码就可以了
使用jQuery自定义动画函数animate来指定easing效果，如自定义一种类弹簧效果的动画：
值得一提的是jQuery 1.4版本中对animate()方法，easing的方法进行了扩展，支持为每个属性指定easing方法，详细请参考这里，如：
使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果，以下两种方法都可以：
jQuery easing 图解
以下图解可以让你更容易理解每一种easing的效果
以上所述是小编给大家介绍的jQuery animate easing使用方法详解的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！
浅谈jQuery animate easing的具体使用方法(推荐) 从jQueryAPI文档中可以知道，jQuery自定义动画的函数.animate(properties[,duration][,easing][,complete])有四个参数：properties：一组包含作为动画属性和终值的样式属
基于JQuery实现分隔条的功能 在C/S系统中有专门的分隔条控件，很方便实现，但在Asp.net中却没有。本文介绍了一种使用JQuery技术实现分隔条的功能。Javascript代码如下，将该代码保存
jQuery1.9+中删除了live以后的替代方法 根据jQuery的官方描述，live方法在1.7中已经不建议使用，在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。on方法可以接受三个参数：事
标签: jQuery animate easing使用方法图文详解
本文链接地址:https://www.jiuchutong.com/biancheng/386706.html 转载请保留说明！
