最近做特效的时候用到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打造水平展开的折叠菜单,人称“手风琴菜单”,因为可以像手风琴那样拉开或收缩起来,用鼠标点击竖向排列的图片,该图片可展开显示,并出现文字说明,类似菜单在jquery中是一个典型应用,用jQ实现...
- `easing`:定义动画的速度曲线,可使用jQuery内置的easing函数或自定义函数。 - `center`:旋转中心点,可以是百分比或者像素值,如`'50% 50%'`表示元素中心。 - `direction`:旋转方向,如`'clockwise'`(顺时针...
`README.md`通常包含插件的使用说明和安装指南。`images`目录可能存储了与插件相关的图片资源,而`js`目录则包含了插件的核心代码。 总之,jQuery.lavalamp是一个简洁且强大的导航菜单插件,它的下划线跟随鼠标滑动...
`readme.html`通常包含了插件的使用说明和注意事项。`jQuery之家.url`可能是一个链接,指向jQuery相关的资源或社区。`css`目录可能包含样式文件,用于美化数字滚动效果。`related`目录可能包含与插件相关的其他文件...
`jquery1.7_20111204.chm`是jQuery 1.7 API的离线帮助文件,包含了所有1.7版本的函数、方法、选择器和事件的详细说明。这个CHM文件是Windows系统的帮助文件格式,用户可以通过它快速查找和学习jQuery的相关功能。 ...
- 文档:可能包含插件的使用说明和API文档。 通过这个插件,开发者可以轻松创建出富有吸引力的3D图像展示效果,提升网站或应用的用户体验。对于那些希望在网页设计中添加动态元素的开发者来说,jR3DCarousel是一个...
本书《Packt.jQuery.1.4.Animation.Techniques.2011》主要介绍了如何使用jQuery 1.4来实现各种动画技巧,适合初学者快速掌握jQuery的动画方法,并构建一套即拿即用的动画工具包。 #### 二、核心知识点概述 ##### 1...
`jquery.easing`是一个扩展了jQuery动画功能的插件,提供了多种 easing functions(缓动函数),这些函数定义了动画的速度变化曲线,可以创造出不同的动画效果,如渐入渐出、弹跳、回弹等。在菜单特效中,这些缓动...
以下是对Filterizr的基本介绍、功能特性以及如何使用它的详细说明。 ### 1. Filterizr基本概念 Filterizr的核心功能是提供一种直观的方式,让用户通过点击不同的筛选选项来改变显示的图片列表。它利用CSS3动画和...
- **jquery.easing.min.js**:这是一个扩展jQuery动画功能的库,提供了多种缓动函数,使得动画更加平滑。 - **jquery.lavalamp.min.js**:可能用于创建响应式导航菜单的特效,使当前选中的菜单项高亮显示,增强用户...
6. `README.md`:可能包含了关于如何使用这个插件、设置参数以及任何其他相关说明的文档。 实现这一功能的基本步骤如下: 1. 在HTML中构建一个多级菜单结构,通常使用`<ul>`和`<li>`标签。 2. 引入jQuery库和其他...
标题“拉开帷幕的jquery代码”暗示了我们将讨论如何使用jQuery库来实现一些动态效果,例如页面元素的渐入渐出或类似剧场帷幕拉开的效果。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...
"说明.htm"和"readme.html"可能是对代码的解释和使用指南,详细介绍了如何运行和自定义这些jQuery特效。通过阅读这两个文件,开发者可以更好地理解代码的工作原理和应用场景。 总的来说,"拉开帷幕的jQuery代码"是...
`jQuery.path`插件还提供了多种动画选项,如速度曲线(easing)、回调函数(complete)等,可以定制动画的行为。同时,由于它基于jQuery,可以与其他jQuery插件和库无缝结合,实现更复杂的功能。 ### 总结 `jQuery...
- `easing`:指定滚动动画的缓动函数,可以是jQuery内置的缓动函数或自定义函数。 - `duration`:滚动动画的持续时间,以毫秒为单位。 - `setHeights`:是否自动设置每个部分的高度以适应屏幕。 - `updateHash`:...
7. **文档说明**:`说明.htm`可能包含了关于如何使用和自定义这个手风琴菜单导航特效的详细指南,包括HTML结构的要求、CSS类名的含义、jQuery插件的调用方法等。 通过以上知识点的学习和实践,开发者不仅可以创建出...
这是一款简单实用的jquery带缩略图的轮播图代码。该轮播图在每张图片中都配有说明文字和缩略图,它实用简单,兼容ie8 ...在页面中引入样式文件main.css和jquery、jquery.easing.min.js文件,以及轮播图js文件main.js。
`jquery.easing.min.js` 是一个jQuery插件,提供了多种缓动函数(easing functions),这些函数可以用于动画效果,使得动画的过渡更自然,比如在模拟聊天窗口弹出时,我们可以使用这个插件来创建平滑的弹出动画。...
`JSShare下载说明.txt`可能包含了关于如何获取和使用这些资源的说明,而`JSShare网页特效分享_JS特效_Jquery特效_HTML5教程_前端素材_编程知识_前端素材.url`可能是一个链接,指向更多类似的Web开发资源。...
可选JS库文件:增强图片显示特效可使用jQuery插件Easing Plugin库文件 素材准备 可自定义CSS样式,控制jQuery插件jQuery Image Flyout提示小图片显示效果。 实例代码 一,包含文件部分 [removed][removed] ...