- 浏览: 259971 次
- 性别:
- 来自: 北京
最新评论
-
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 793单例模式确保一个类在整个应用程序中只有一个是实例对象,在J ... -
移动WEB开发中媒体查询里的width, device-width, resolution
2014-05-28 10:14 1000/*1、width: viewport的宽度,css像素,三星 ... -
前端性能优化
2014-05-27 15:16 8751. 请减少HTTP请求 基本原理: ... -
jquery sizzle 选择器浅析
2014-05-26 14:23 1200看了jquery的源码,jquery用的选择器的引擎是siz ... -
jQuery 1.8,1.9和2.0分别带来的新特性
2014-05-26 14:17 1327jQuery 1.8 可定制 在jQuery ... -
jquery点击div之外的地方div本身消失
2014-05-15 12:22 874<!DOCTYPE html PUBLIC " ... -
jquery-migrate: 迁移旧的jQuery代码至jQuery1.9以上的版本
2014-05-14 16:31 649这个插件可以用来检测和恢复在jQuery1.9版本中已删除或 ... -
移动WEB在线开发工具 – Codiqa
2014-05-12 15:43 633Codiqa,https://codiqa.com 简单试用 ... -
jQuery反向排序(倒序)子对象
2013-12-26 10:53 2280<!DOCTYPE html><html&g ... -
js object写法 参数传递jquery对象
2013-12-24 11:21 925<!DOCTYPE HTML PUBLIC &quo ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-12-24 11:08 587一、思路 1、单击元素时,使元素可以编辑,并获得焦点 2 ... -
jquery 方块转盘 得 ###jiang####品
2013-12-02 14:42 605<!DOCTYPE html PUBLIC " ... -
检测用户是否连续输入减少ajax请求次数
2013-11-07 10:43 850<!DOCTYPE HTML PUBLIC " ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-11-05 15:51 570<!doctype html><html&g ... -
resize和scroll事件的优化,防止浏览器死掉
2013-07-30 10:51 691原理是利用setTimeout让resize事件和scrol ... -
javascript中apply和call的用法和区别
2013-07-30 10:12 6021.apply和call的区别在哪 ... -
让IE支持CSS3 Media Query实现响应式Web设计
2013-07-30 10:11 669如今的屏幕分辨率,小至320px(iPhone),大到2560 ... -
JSON对象和字符串之间的相互转换(包括兼容办法)
2013-07-18 17:29 719现在JSON对象用在ajax中越来越普遍了,实际项目中经常涉 ... -
基于HTML5的可预览多图片Ajax上传
2013-07-18 14:20 1289核心骨架脚本简单剖析 首先是文件上传的一个core文件,是 ... -
webkit webApp 开发技术要点
2013-07-18 14:17 7421. viewport:可视区域 对于桌面浏览器,我们都很 ...
相关推荐
jquery.easing.js 1.3 是一个配合jquery实现完美动画效果的扩展插件,比如我们在使用jquery制作一幅图片滚动或图片渐变,使用本插件可扩展或增强jquery性能,生成完美无缺兼容性更好的jquery动画来,它不仅可以用于...
今天我给大家分享的是一款jQuery动画效果插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。它非常小巧,且有多种动画方式供选择,使用简单且免费。
jquery.easing.js 1.3 动画效果扩展插件.zip
jQuery easing动画运动效果.zip
jquery.easing.js 1.3 是一个配合jquery实现完美动画效果的扩展插件,比如我们在使用jquery制作一幅图片滚动或图片渐变,使用本插件可扩展或增强jquery性能,生成完美无缺兼容性更好的jquery动画来,它不仅可以用于...
jQuery Easing div切换效果的例子,不同效果的展示。
asing插件大家也许一直在用,非常的不错,能实现很多你想要的效果,并且jquery的很多内置方法也开始支持Easing参数了,经常使用jquery的朋友一定会知道需要下载这个jar包
jQuery.easing插件是一款非常轻,非常小的jQuery插件,只占有8KB大小 几乎不会影响你的网页加载速度。 它提供了简单的动画效果,如淡入淡出以及自定义动画效果,使用该插件可以实现直线匀速运功、变加速...
jQuery插件easing 效果,以前在flash制作编程中经常设计到的一种效果。很旋,包含了数十种效果
jquery-easing-1.3.pack.js jquery的animate方法内的easing效果。 默认jQuery提供"linear" 和 "swing".
easing动画运动效果是一款简单的如淡入淡出以及自定义动画效果,支持直线匀速运功、变加速运动、缓冲等丰富的动画效果。
jquery著名插件,easing,为animate动画提供不同的效果
jquery.easing.1.3.min.js 动画效果js
具体介绍 jquery插件之easing使用,适合移动开发的js使用
css3过渡效果不够用?通过jquery.easing.1.3.js可以为为动画增加更多的过渡效果如$('div').animate({'left':300},3000,'easeInOutElastic',function(){ //动画执行完毕回调函数 });
实现类似苹果的图标导航条点击切换效果jQuery插件easing.zip 实现类似苹果的图标导航条点击切换效果jQuery插件easing.zip 实现类似苹果的图标导航条点击切换效果jQuery插件easing.zip
JQuery的SlideViewer插件和easing插件
jQuery简易插件它是什么? GSGD提供的jQuery插件,可提供高级缓动选项。 更多信息对于CDN,请使用CloudFlare 帮助我的主机。 谢谢你。AMD或CommonJS的用法// CommonJSconst jQuery = require ( 'jquery' ) ;require ...
迄今为止发现的唯一一个兼容各种浏览器,而且可以居中显示的瀑布流程序代码! 个人原创
jquery 模拟人工拖拽轨迹,生成轨迹数据