- 浏览: 263465 次
- 性别:
- 来自: 北京
-
最新评论
-
haixin3036:
jQuery是一套跨浏览器的JavaScript库,简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang:
非常感谢分享,正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369:
不错。。。
移动端webapp开发必备知识
jQuery Easing动画效果扩展插件:jQuery Easing Plugin。在jQuery文档中我们可以看到,自定义动画函数.animate()有四个参数:
params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
duration (String,Number) : (可选) 三种预定速度之一的字符串(”slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
callback (Function) : (可选) 在动画完成时执行的函数
其中参数easing默认有两个效果:“linear”和“swing”,如果需要更多就要插件支持了,也就是今天断桥残雪要跟大家分享的插件:jQuery Easing Plugin.
在jQuery Easing中设置了easeInElastic、easeOutElastic、easeInOutElastic等共31中不同的效果,应该可以满足大家的需要啦,如果你还想研究下动画移动的效果图,还可以看一下这篇文章不仅有动画演示,还有图片分析。
引入Easing js文件
要使用jQuery Easing扩展,首先我们要在jQuery之后,引入jQuery Easing Plugin文件,如以下代码
<script type="text/javascript" src="http://www.js8.in/mywork/jquery_easing/easing.js">
</script>
jQuery Easing简单教程
方法1、设置jQuery默认动画效果
jQuery.easing.def = “method”;//如:easeOutExpo
方法2、jQuery默认动画
支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果
如以下代码:
$(element).slideUp({
duration: 1000,
easing: method,
complete: callback});
方法3、使用jQuery自定义动画函数.animate()
jQuery 的.animate()是自定义动画的函数,如上面所说,有四个参数,而其中easing的参数就是我们进行动画效果扩展的方法名称(如easeOutExpo)。最简单的使用方法是:
$(myElement).animate({
left: 500,
top: 500
}, 'easeOutExpo');
上面的代码就是实现的动画之后以easeOutExpo的方法来进行缓冲(easing),这是animate() easing的基本用法(点击查看此效果演示DEMO)
James Padolsey对jQuery1.3.2的animate函数进行了修改扩展:
jQuery.fn.animate = (function(_anim){
var jQEasing = jQuery.easing;
return function(prop, duration, easing, callback) {
var props = {}, optall, i, hasEaser = false;
for ( i in prop ) {
if ( jQuery.isArray(prop[i]) ) {
hasEaser = true;
props[i] = prop[i][1];
prop[i] = prop[i][0];
}
}
opt = jQuery.speed(duration, easing, callback);
if (hasEaser) {
opt.step = (function(_step){
return function(now, fx) {
var end = fx.end, easeFn;
if ( easeFn = props[fx.prop] ) {
fx.now = jQEasing[easeFn]( now/end, now, 0, end, end );
}
_step && _step.call( fx.elem, fx.now, fx );
};
})(opt.step);
}
opt.complete = opt.old || callback || jQuery.isFunction(easing) && easing;
return _anim.call( this, prop, opt );
};
})(jQuery.fn.animate);
在jQuery1.4中这种方式已经被引入,所以jQuery1.4中不需要添加jQuery的animate()扩展,我们就可以使用下面的更加方便代码啦:
$(myElement).animate({
left: 500,
top: [500, 'easeOutBounce']
}, 1000,'swing');
上面的代码的效果是,总体上来使用swing的方法来缓冲,而top的时候采用easeOutBounce的方法来缓冲。(点击查看此效果演示DEMO)
jQuery1.4 的animate()+Easing
值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,英语不错的童鞋,可以点击此处
jQuery(myElement).animate({
left: [500, 'swing'],
top: [200, 'easeOutBounce']
});
或者:
jQuery(myElement).animate({
left: 500,
top: 200
}, {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
有了上面的Easing扩展效果,已经能够满足了我们日常的动画要求了,jQuery1.4正式版也已经发布,添加了很多新的方法函数,但是很多新方法的研究还没有跟入,期待jQuery1.4的新中文文档!
params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
duration (String,Number) : (可选) 三种预定速度之一的字符串(”slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
callback (Function) : (可选) 在动画完成时执行的函数
其中参数easing默认有两个效果:“linear”和“swing”,如果需要更多就要插件支持了,也就是今天断桥残雪要跟大家分享的插件:jQuery Easing Plugin.
在jQuery Easing中设置了easeInElastic、easeOutElastic、easeInOutElastic等共31中不同的效果,应该可以满足大家的需要啦,如果你还想研究下动画移动的效果图,还可以看一下这篇文章不仅有动画演示,还有图片分析。
引入Easing js文件
要使用jQuery Easing扩展,首先我们要在jQuery之后,引入jQuery Easing Plugin文件,如以下代码
<script type="text/javascript" src="http://www.js8.in/mywork/jquery_easing/easing.js">
</script>
jQuery Easing简单教程
方法1、设置jQuery默认动画效果
jQuery.easing.def = “method”;//如:easeOutExpo
方法2、jQuery默认动画
支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果
如以下代码:
$(element).slideUp({
duration: 1000,
easing: method,
complete: callback});
方法3、使用jQuery自定义动画函数.animate()
jQuery 的.animate()是自定义动画的函数,如上面所说,有四个参数,而其中easing的参数就是我们进行动画效果扩展的方法名称(如easeOutExpo)。最简单的使用方法是:
$(myElement).animate({
left: 500,
top: 500
}, 'easeOutExpo');
上面的代码就是实现的动画之后以easeOutExpo的方法来进行缓冲(easing),这是animate() easing的基本用法(点击查看此效果演示DEMO)
James Padolsey对jQuery1.3.2的animate函数进行了修改扩展:
jQuery.fn.animate = (function(_anim){
var jQEasing = jQuery.easing;
return function(prop, duration, easing, callback) {
var props = {}, optall, i, hasEaser = false;
for ( i in prop ) {
if ( jQuery.isArray(prop[i]) ) {
hasEaser = true;
props[i] = prop[i][1];
prop[i] = prop[i][0];
}
}
opt = jQuery.speed(duration, easing, callback);
if (hasEaser) {
opt.step = (function(_step){
return function(now, fx) {
var end = fx.end, easeFn;
if ( easeFn = props[fx.prop] ) {
fx.now = jQEasing[easeFn]( now/end, now, 0, end, end );
}
_step && _step.call( fx.elem, fx.now, fx );
};
})(opt.step);
}
opt.complete = opt.old || callback || jQuery.isFunction(easing) && easing;
return _anim.call( this, prop, opt );
};
})(jQuery.fn.animate);
在jQuery1.4中这种方式已经被引入,所以jQuery1.4中不需要添加jQuery的animate()扩展,我们就可以使用下面的更加方便代码啦:
$(myElement).animate({
left: 500,
top: [500, 'easeOutBounce']
}, 1000,'swing');
上面的代码的效果是,总体上来使用swing的方法来缓冲,而top的时候采用easeOutBounce的方法来缓冲。(点击查看此效果演示DEMO)
jQuery1.4 的animate()+Easing
值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,英语不错的童鞋,可以点击此处
jQuery(myElement).animate({
left: [500, 'swing'],
top: [200, 'easeOutBounce']
});
或者:
jQuery(myElement).animate({
left: 500,
top: 200
}, {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
有了上面的Easing扩展效果,已经能够满足了我们日常的动画要求了,jQuery1.4正式版也已经发布,添加了很多新的方法函数,但是很多新方法的研究还没有跟入,期待jQuery1.4的新中文文档!
发表评论
-
在JavaScript中应用单例模式管理命名空间
2014-05-28 10:56 815单例模式确保一个类在整个应用程序中只有一个是实例对象,在J ... -
移动WEB开发中媒体查询里的width, device-width, resolution
2014-05-28 10:14 1021/*1、width: viewport的宽度,css像素,三星 ... -
前端性能优化
2014-05-27 15:16 8971. 请减少HTTP请求 基本原理: ... -
jquery sizzle 选择器浅析
2014-05-26 14:23 1230看了jquery的源码,jquery用的选择器的引擎是siz ... -
jQuery 1.8,1.9和2.0分别带来的新特性
2014-05-26 14:17 1349jQuery 1.8 可定制 在jQuery ... -
jquery点击div之外的地方div本身消失
2014-05-15 12:22 894<!DOCTYPE html PUBLIC " ... -
jquery-migrate: 迁移旧的jQuery代码至jQuery1.9以上的版本
2014-05-14 16:31 672这个插件可以用来检测和恢复在jQuery1.9版本中已删除或 ... -
移动WEB在线开发工具 – Codiqa
2014-05-12 15:43 653Codiqa,https://codiqa.com 简单试用 ... -
jQuery反向排序(倒序)子对象
2013-12-26 10:53 2302<!DOCTYPE html><html&g ... -
js object写法 参数传递jquery对象
2013-12-24 11:21 946<!DOCTYPE HTML PUBLIC &quo ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-12-24 11:08 605一、思路 1、单击元素时,使元素可以编辑,并获得焦点 2 ... -
jquery 方块转盘 得 ###jiang####品
2013-12-02 14:42 620<!DOCTYPE html PUBLIC " ... -
检测用户是否连续输入减少ajax请求次数
2013-11-07 10:43 870<!DOCTYPE HTML PUBLIC " ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-11-05 15:51 581<!doctype html><html&g ... -
resize和scroll事件的优化,防止浏览器死掉
2013-07-30 10:51 710原理是利用setTimeout让resize事件和scrol ... -
javascript中apply和call的用法和区别
2013-07-30 10:12 6201.apply和call的区别在哪 ... -
让IE支持CSS3 Media Query实现响应式Web设计
2013-07-30 10:11 684如今的屏幕分辨率,小至320px(iPhone),大到2560 ... -
JSON对象和字符串之间的相互转换(包括兼容办法)
2013-07-18 17:29 739现在JSON对象用在ajax中越来越普遍了,实际项目中经常涉 ... -
基于HTML5的可预览多图片Ajax上传
2013-07-18 14:20 1300核心骨架脚本简单剖析 首先是文件上传的一个core文件,是 ... -
webkit webApp 开发技术要点
2013-07-18 14:17 7561. viewport:可视区域 对于桌面浏览器,我们都很 ...
相关推荐
jquery.easing.js 1.3 动画效果扩展插件.zip
jquery.easing.js 1.3 是一个配合jquery实现完美动画效果的扩展插件,比如我们在使用jquery制作一幅图片滚动或图片渐变,使用本插件可扩展或增强jquery性能,生成完美无缺兼容性更好的jquery动画来,它不仅可以用于...
总结,jQuery Easing插件极大地丰富了jQuery动画的表现力,使得开发者可以通过简单的代码实现各种复杂、生动的视觉效果。结合适当的场景选择合适的缓动函数,能够提升用户界面的交互体验和视觉吸引力。在实际项目中...
jQuery插件easing是Web开发中的一个强大工具,它扩展了jQuery的核心动画功能,提供了更加丰富和精细的动画过渡效果。在Flash制作中, easing效果常用于创建平滑、动态的运动路径,而现在,借助jQuery easing插件,...
jquery.easing.js 1.3 是一个配合jquery实现完美动画效果的扩展插件,比如我们在使用jquery制作一幅图片滚动或图片渐变,使用本插件可扩展或增强jquery性能,生成完美无缺兼容性更好的jquery动画来,它不仅可以用于...
Easing插件是jQuery的一个扩展,增加了更多的动画缓动函数,这些函数可以改变动画的速度曲线,使得动画更具有动态感和视觉吸引力。Easing插件默认提供了多种预设的缓动函数,如`easeInQuad`(二次方加速)、`...
除了`.animateCSS()`,还有一些其他的插件,如`jQuery.easing`,它可以为jQuery动画添加更多的缓动函数,使得动画更加多样化。配合CSS3动画,可以实现更复杂的时间曲线和运动轨迹。 为了实际应用这些插件,我们需要...
5. `js`文件夹:这里包含的JavaScript文件可能有`jquery.plugin.js`(插件的主体代码)、`jquery.easing.js`(可能用于实现更复杂的动画效果)以及其他辅助脚本。 总的来说,这个"超炫效果的jQuery相册插件"充分...
jQuery的方法也非常丰富,例如`$(...).click(fn)`用于绑定点击事件,`$(...).html(content)`用于设置元素的HTML内容,`$(...).css(props)`用于修改样式属性,以及`$(...).animate(props, duration, easing, callback...
5. **插件扩展**:jQuery生态系统中有许多插件专门用于创建各种动画效果,例如,`jQuery.scrollify`用于页面滚动时的平滑效果,`jQuery.easing`提供了更多的缓动函数,使得动画过渡更自然。 6. **事件绑定**:...
1. **动画插件**:如`jQuery.animate()`、`jQuery.easing`,用于实现复杂和流畅的动画效果。 2. **表单处理插件**:如`jQuery.validate`,用于验证表单输入,提高用户体验。 3. **导航和菜单插件**:如`jQuery....
jQuery横向滚动内容插件Sly是一款基于流行的JavaScript库jQuery开发的高效工具,旨在为网页内容提供流畅、动态的水平滚动效果。在网页设计中,这种滚动功能常常用于展示多列内容、图片轮播或者长列表,使用户可以...
例如,通过 `$.fn.extend()` 可以扩展jQuery对象的方法,实现更复杂、独特的动画效果。 总结,jQuery 动画为开发者提供了丰富的动画工具,使得在网页上创建交互式、动态的效果变得简单易行。无论你是初学者还是经验...
jQuery插件是基于jQuery核心功能的扩展,为开发者提供了更多的可能性,使得网页开发变得更加高效和便捷。这些插件涵盖了各种各样的功能,包括动画效果、表单处理、图片轮播、数据可视化、导航菜单、滑块、模态对话框...
一个常见的Scroll插件是`jquery.scrollTo`,它允许开发者精确地控制页面滚动到指定的位置,提供了一种平滑的动画效果。 `jquery.scrollTo`插件的核心功能是通过提供一个目标元素的ID或偏移量,使得页面能够平滑地...
jQuery.HooRay是基于jQuery的一款开源插件,它集合了一系列常用的网页动画和交互效果,如滑动、淡入淡出、轮播图、下拉菜单、弹窗等。这些预设的特效不仅易于集成,而且可定制性强,能满足不同项目的需求。 二、...
2. `jquery.easing.1.3.js` 是一个jQuery插件,提供了丰富的缓动函数,使得动画效果更加平滑自然。在这个菜单效果中,可能会用到这些缓动函数来控制下拉和右拉的过渡速度。 3. `jquery.naviDropDown.1.0.js` 可能是...
7. **动画效果**:Animate.css和jQuery Easing插件提供更多的动画选项和过渡效果,使得动态展示更加丰富多彩。 8. **导航与菜单**:如Nivo Slider用于创建高级滑块,而metisMenu则为网站添加了可折叠的侧边栏菜单。...
`jquery-easing.1.2.js`和`.pack.js`版本是jQuery easing插件,它们扩展了jQuery的动画功能,允许自定义动画的速度曲线,从而创造出更加自然和吸引人的过渡效果。`jquery-easing-compatibility.1.2.js`可能是为了...
jQuery社区开发了众多插件,如Bootstrap的弹出框(`bootstrap-dialog`), 图片轮播(`owl.carousel`), 表格排序(`datatables`)等,极大地扩展了jQuery的功能。使用它们,只需引入相应的JS和CSS文件,然后按照文档进行...