`

jQuery.easing使用说明

 
阅读更多

最近做特效的时候用到jQuery.easing插件这里将知识点做个备份:

 

jQuery.easing插件中包含了有多的动画特效,其中默认的是swing和def特效。其它的特效说明如下:
  easeInQuad       easeOutQuad       easeInOutQuad       二次方缓动
  easeInCubic      easeOutCubic      easeInOutCubic      三次方缓动
  easeInQuart      easeOutQuart      easeInOutQuart      四次方缓动
  easeInQuint      easeOutQuint      easeInOutQuint      五次方缓动
  easeInSine       easeOutSine       easeInOutSine       正弦曲线缓动
  easeInExpo       easeOutExpo       easeInOutExpo       指数曲线缓动
  easeInCirc       easeOutCirc       easeInOutCirc       圆形曲线缓动
  easeInElastic    easeOutElastic    easeInOutElastic    指数衰减的正弦曲线缓动
  easeInBack       easeOutBack       easeInOutBack       超过范围的三次方缓动
  easeInBounce     easeOutBounce     easeInOutBounce     指数衰减的反弹缓动

具体每一个效果是做什么的可以使用中慢慢体验。每一种 都分为 In   Out    InOut
 In:是指动画开始的时候 具有这个效果
 Out:是指动画结束的时候具有这个效果
 InOut:是指动画开始和结束的时候都具有这个效果

    比如Elastic:就是具有弹簧效果的。
    easeInElastic[开始时弹簧]、
    easeOutElastic[结束时弹簧]、
    easeInOutElastic[开始和结束都弹簧]

使用方法:

1)默认用法

$(document).ready(function() {

    jQuery.easing.def = 'easeOutBack';

    $("#btn").click(function(){

        $('#bomb').animate({left:400},1000);

    });    

});

2)习惯用法

$(document).ready(function() {

    $("#btn").click(function(){

    $('#bomb').animate({left:400},'easeInBack')

    $('#bomb').animate({left:100}, {duration: 1000,easing: 'easeOutBack',complete:scrollDone})

  });  

});

 

 

分享到:
评论

相关推荐

    jquery.easing.js打造水平展开的折叠菜单.rar

    jquery.easing.js打造水平展开的折叠菜单,人称“手风琴菜单”,因为可以像手风琴那样拉开或收缩起来,用鼠标点击竖向排列的图片,该图片可展开显示,并出现文字说明,类似菜单在jquery中是一个典型应用,用jQ实现...

    js旋转插件jquery.rotate

    - `easing`:定义动画的速度曲线,可使用jQuery内置的easing函数或自定义函数。 - `center`:旋转中心点,可以是百分比或者像素值,如`'50% 50%'`表示元素中心。 - `direction`:旋转方向,如`'clockwise'`(顺时针...

    jquery.lavalamp 下划线随鼠标左右滑动的导航菜单效果

    `README.md`通常包含插件的使用说明和安装指南。`images`目录可能存储了与插件相关的图片资源,而`js`目录则包含了插件的核心代码。 总之,jQuery.lavalamp是一个简洁且强大的导航菜单插件,它的下划线跟随鼠标滑动...

    jQuery数字滚动累加动画插件

    `readme.html`通常包含了插件的使用说明和注意事项。`jQuery之家.url`可能是一个链接,指向jQuery相关的资源或社区。`css`目录可能包含样式文件,用于美化数字滚动效果。`related`目录可能包含与插件相关的其他文件...

    jquery1.7 API/jquery-1.7.1.min.js/jquery-1.7.1.js

    `jquery1.7_20111204.chm`是jQuery 1.7 API的离线帮助文件,包含了所有1.7版本的函数、方法、选择器和事件的详细说明。这个CHM文件是Windows系统的帮助文件格式,用户可以通过它快速查找和学习jQuery的相关功能。 ...

    jR3DCarousel是一款效果非常炫酷的3D旋转木马jQuery插件

    - 文档:可能包含插件的使用说明和API文档。 通过这个插件,开发者可以轻松创建出富有吸引力的3D图像展示效果,提升网站或应用的用户体验。对于那些希望在网页设计中添加动态元素的开发者来说,jR3DCarousel是一个...

    Packt.jQuery.1.4.Animation.Techniques.2011

    本书《Packt.jQuery.1.4.Animation.Techniques.2011》主要介绍了如何使用jQuery 1.4来实现各种动画技巧,适合初学者快速掌握jQuery的动画方法,并构建一套即拿即用的动画工具包。 #### 二、核心知识点概述 ##### 1...

    jQuery超酷文本和图标动画菜单特效

    `jquery.easing`是一个扩展了jQuery动画功能的插件,提供了多种 easing functions(缓动函数),这些函数定义了动画的速度变化曲线,可以创造出不同的动画效果,如渐入渐出、弹跳、回弹等。在菜单特效中,这些缓动...

    jquery filterizr图片列表筛选插件附教程链接

    以下是对Filterizr的基本介绍、功能特性以及如何使用它的详细说明。 ### 1. Filterizr基本概念 Filterizr的核心功能是提供一种直观的方式,让用户通过点击不同的筛选选项来改变显示的图片列表。它利用CSS3动画和...

    客服源码v.10

    - **jquery.easing.min.js**:这是一个扩展jQuery动画功能的库,提供了多种缓动函数,使得动画更加平滑。 - **jquery.lavalamp.min.js**:可能用于创建响应式导航菜单的特效,使当前选中的菜单项高亮显示,增强用户...

    Jquery扁平化多级菜单分享

    6. `README.md`:可能包含了关于如何使用这个插件、设置参数以及任何其他相关说明的文档。 实现这一功能的基本步骤如下: 1. 在HTML中构建一个多级菜单结构,通常使用`<ul>`和`<li>`标签。 2. 引入jQuery库和其他...

    拉开帷幕的jquery代码

    标题“拉开帷幕的jquery代码”暗示了我们将讨论如何使用jQuery库来实现一些动态效果,例如页面元素的渐入渐出或类似剧场帷幕拉开的效果。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...

    拉开帷幕的jquery代码.zip

    "说明.htm"和"readme.html"可能是对代码的解释和使用指南,详细介绍了如何运行和自定义这些jQuery特效。通过阅读这两个文件,开发者可以更好地理解代码的工作原理和应用场景。 总的来说,"拉开帷幕的jQuery代码"是...

    实现元素沿贝兹曲线和弧线运动的jQuery插件

    `jQuery.path`插件还提供了多种动画选项,如速度曲线(easing)、回调函数(complete)等,可以定制动画的行为。同时,由于它基于jQuery,可以与其他jQuery插件和库无缝结合,实现更复杂的功能。 ### 总结 `jQuery...

    jquery整屏滚动插件Scrollify

    - `easing`:指定滚动动画的缓动函数,可以是jQuery内置的缓动函数或自定义函数。 - `duration`:滚动动画的持续时间,以毫秒为单位。 - `setHeights`:是否自动设置每个部分的高度以适应屏幕。 - `updateHash`:...

    手风琴菜单导航jquery特效.zip

    7. **文档说明**:`说明.htm`可能包含了关于如何使用和自定义这个手风琴菜单导航特效的详细指南,包括HTML结构的要求、CSS类名的含义、jQuery插件的调用方法等。 通过以上知识点的学习和实践,开发者不仅可以创建出...

    jquery带缩略图的轮播图代码.zip

    这是一款简单实用的jquery带缩略图的轮播图代码。该轮播图在每张图片中都配有说明文字和缩略图,它实用简单,兼容ie8 ...在页面中引入样式文件main.css和jquery、jquery.easing.min.js文件,以及轮播图js文件main.js。

    在页面模仿淘宝聊天功能弹出QQ消息

    `jquery.easing.min.js` 是一个jQuery插件,提供了多种缓动函数(easing functions),这些函数可以用于动画效果,使得动画的过渡更自然,比如在模拟聊天窗口弹出时,我们可以使用这个插件来创建平滑的弹出动画。...

    使用jquery制作精美的下拉菜单

    `JSShare下载说明.txt`可能包含了关于如何获取和使用这些资源的说明,而`JSShare网页特效分享_JS特效_Jquery特效_HTML5教程_前端素材_编程知识_前端素材.url`可能是一个链接,指向更多类似的Web开发资源。...

    jQuery插件ImageFlyout弹出图片实现javascript放大图片功能

    可选JS库文件:增强图片显示特效可使用jQuery插件Easing Plugin库文件 素材准备 可自定义CSS样式,控制jQuery插件jQuery Image Flyout提示小图片显示效果。 实例代码 一,包含文件部分 [removed][removed] ...

Global site tag (gtag.js) - Google Analytics