- 浏览: 26491 次
最新评论
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JQuery强化教程 —— jQuery Easing
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:
properties:一组包含作为动画属性和终值的样式属性和及其值的集合
duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing(可选):要使用的过渡效果的名称,如:"linear" 或"swing"
complete(可选):在动画完成时执行的函数
其中参数easing默认有两个效果:"linear"和"swing",如果需要更多效果就要插件支持了,jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多种效果,大家可以点击这里去看每一种easing的演示效果,下面详细介绍下其使用方法及每种easing的曲线图。
jQuery easing 使用方法
首先,项目中如果需要使用特殊的动画效果,则需要在引入jQuery之后引入jquery.easing.1.3.js
<script type="text/javascript" src="http://code.jquery.com/jquery- ... gt%3B
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jque ... gt%3B
引入之后,easing参数可选的值就有以下32种:
linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
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.extend( jQuery.easing,
{
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
});
使用jQuery自定义动画函数animate来指定easing效果,如自定义一种类弹簧效果的动画:
$(myElement).animate({
top: 500,
opacity: 1
}, 1000, 'easeOutBounce');
值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,支持为每个属性指定easing方法,详细请参考这里,如:
$(myElement).animate({
left: [500, 'swing'],
top: [200, 'easeOutBounce']
});
也可以用另外一种写法:
$(myElement).animate({
left: 500,
top: 200
}, {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果,以下两种方法都可以:
$(myElement).slideUp(1000, method, callback});
$(myElement).slideUp({
duration: 1000,
easing: method,
complete: callback
});
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:
properties:一组包含作为动画属性和终值的样式属性和及其值的集合
duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing(可选):要使用的过渡效果的名称,如:"linear" 或"swing"
complete(可选):在动画完成时执行的函数
其中参数easing默认有两个效果:"linear"和"swing",如果需要更多效果就要插件支持了,jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多种效果,大家可以点击这里去看每一种easing的演示效果,下面详细介绍下其使用方法及每种easing的曲线图。
jQuery easing 使用方法
首先,项目中如果需要使用特殊的动画效果,则需要在引入jQuery之后引入jquery.easing.1.3.js
<script type="text/javascript" src="http://code.jquery.com/jquery- ... gt%3B
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jque ... gt%3B
引入之后,easing参数可选的值就有以下32种:
linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
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.extend( jQuery.easing,
{
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
});
使用jQuery自定义动画函数animate来指定easing效果,如自定义一种类弹簧效果的动画:
$(myElement).animate({
top: 500,
opacity: 1
}, 1000, 'easeOutBounce');
值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,支持为每个属性指定easing方法,详细请参考这里,如:
$(myElement).animate({
left: [500, 'swing'],
top: [200, 'easeOutBounce']
});
也可以用另外一种写法:
$(myElement).animate({
left: 500,
top: 200
}, {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果,以下两种方法都可以:
$(myElement).slideUp(1000, method, callback});
$(myElement).slideUp({
duration: 1000,
easing: method,
complete: callback
});
发表评论
-
JavaScript强化教程 —— 对象创建模式
2016-10-09 17:12 711本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 645本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 826本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 596本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 简介(10)
2016-09-14 17:41 530本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1290本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1189本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 774本文为 HTML5培训 机构官方 HTML5培训 教程,主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 874本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
2016-09-02 16:07 1045本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 769本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——JavaScript Math(算数) 对象
2016-08-26 16:33 560本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
2016-08-25 16:25 1211本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 -- cocosjs场景切换
2016-08-24 16:11 1380本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1103本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 834本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——获取内容和属性
2016-08-15 15:35 470本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——jQuery 动画2
2016-08-12 14:12 631本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二) —— 列表组listgroup
2016-08-11 14:46 644本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二)——导航条
2016-08-08 16:22 549本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ...
相关推荐
在本项目中,通过结合Jquery库和两个特定的插件——jquery.easing.js与jquery.vgrid.js,实现了这种布局,并且确保了在包括IE6+以及Firefox在内的多种浏览器中的兼容性。 1. Jquery:Jquery是一个广泛使用的...
本篇将深入探讨两个与jQuery相关的插件——jQueryRotate和jQuery Easing,它们分别用于实现旋转动画效果和提供平滑的动画过渡。 jQueryRotate是一个专门用于在JavaScript中实现元素旋转效果的插件,版本2.2提供了...
今天我们要深入探讨的,就是jQuery生态系统中的一个重要插件——jQuery Easing。这个插件源于GSGD(GreenSock Gaming Division),它为jQuery的动画添加了高级缓动选项,赋予开发者更多的创意空间。 首先,让我们...
easing: 'easeInOutQuart', // 缓动函数,可以是预设值或自定义CSS3动画曲线 offset: 50, // 滚动时元素的偏移量 toggleClass: 'is-inview', // 当元素进入视口时添加的CSS类 once: false, // 是否仅在元素首次...
本文将深入探讨一款基于jQuery的圆盘抽奖插件——jqueryRotate,以及如何在实际项目中有效利用它。 一、jqueryRotate概述 jqueryRotate是一款轻量级的jQuery插件,主要功能是实现元素的旋转效果,特别适用于创建...
本资源“网页模板——基于jquery来实现图片滑动门效果.zip”提供了使用JavaScript库jQuery实现这一效果的具体方案。 jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,...
**jQuery学习示例源码——jQuery基本知识** jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的设计目标是使JavaScript编程变得更简单、更易用,它封装了...
首先,我们来看看这个插件的核心技术——jQuery。jQuery由John Resig于2006年创建,它通过提供简洁的API,使得JavaScript开发者能够更高效地操作DOM(Document Object Model),处理事件,以及创建复杂的动画效果。...
本教程将聚焦于一个特定的jQuery特效——"背景图片跟随鼠标摆动",这是一个能够提升用户交互体验的创新设计。这个特效使得网页背景图片根据用户的鼠标移动而动态变化,增加了视觉吸引力和趣味性。 首先,我们需要...
本文将详细探讨一款基于jQuery的插件——Zoom Effect,以及它在游戏开发中的独特应用。 Zoom Effect jQuery插件是一款专门用于实现图片缩放效果的工具,它能够为网页中的图片添加平滑、自然的放大和缩小动画效果。...
今天我们将深入探讨一款基于jQuery的轻量级插件——jquery.singlePageNav.min.js。这款插件专为单页面网站设计,提供了一个简洁高效的导航解决方案。 一、插件简介 jquery.singlePageNav.min.js是一款旨在简化单...
《jQuery 动画详解——基于“笨人的学习笔记”》 在Web开发中,动态效果是提升用户体验的重要手段,jQuery库以其简洁易用的API,让JavaScript动画变得简单且高效。本篇主要针对jQuery的动画功能进行深入探讨,结合...
**jQuery图片滚动切换插件——jCarousel Lite详解** 在网页设计中,图片的展示方式多种多样,其中一种常见且吸引用户注意力的方式就是图片滚动切换效果。`jCarousel Lite`是基于jQuery的一款轻量级的图片轮播插件,...
首先,我们要理解jQuery的核心理念——"Write Less, Do More"。通过使用jQuery,开发者可以以更少的代码实现更多的功能,如选择器、DOM操作、事件处理、动画等。在这个特定的案例中,我们利用jQuery创建了一个具有...
首先,了解jQuery的核心功能之一——动画。jQuery的animate函数允许开发者自定义元素的CSS属性,如位置、大小、颜色等,并在指定时间内平滑地改变这些属性,从而创建出各种复杂的动画效果。它的基本语法如下: ```...
内容索引:脚本资源,Ajax/JavaScript,jQuery,翻书 来自国外的jQuery翻书特效——jquery.booklet 核心库及实例完整版,前天发现的jquery.booklet,但是没有发现实例,自己捣腾了半天也没弄出个所以然,没办法只得求救...
**jQuery杂类——深入探索jQuery库的广泛应用与实践** jQuery是一个高效、简洁的JavaScript库,它的出现极大地简化了网页交互和DOM操作。本篇将详细探讨jQuery中的杂类知识点,帮助你深入理解并熟练运用jQuery。 #...
《jQuery单页导航插件——singlePageNav.min详解》 在网页设计中,单页导航是一种常见的交互方式,尤其在响应式布局和移动端网站中应用广泛。jQuery.singlePageNav.min是一个轻量级的jQuery插件,它使得创建流畅、...
**jQuery学习笔记——属性大全** 在JavaScript的世界里,jQuery是一个非常流行且强大的库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本笔记将深入探讨jQuery中的核心属性,帮助开发者快速掌握和...
首先,让我们来探讨jQuery 1.7的核心改进之一——事件处理。在1.7版本中,`.on()`方法被引入,取代了之前的`.bind()`, `.live()`, `.delegate()`等事件绑定方法。`.on()`方法提供了一种更加灵活且高效的方式来处理...