Jquery中给animation加更多的运作效果实例


Posted in Javascript onSeptember 05, 2013
//animation
jQuery.extend({
    easing:
    {        // ******* back
        backEaseIn: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            var s = 1.70158; // default overshoot value, can be adjusted to suit
            return c * (p /= 1) * p * ((s + 1) * p - s) + firstNum;
        },
        backEaseOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            var s = 1.70158; // default overshoot value, can be adjusted to suit
            return c * ((p = p / 1 - 1) * p * ((s + 1) * p + s) + 1) + firstNum;
        },
        backEaseInOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            var s = 1.70158; // default overshoot value, can be adjusted to suit
            if ((p /= 0.5) < 1)
                return c / 2 * (p * p * (((s *= (1.525)) + 1) * p - s)) + firstNum;
            else
                return c / 2 * ((p -= 2) * p * (((s *= (1.525)) + 1) * p + s) + 2) + firstNum;
        },
        // ******* bounce
        bounceEaseIn: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            var inv = this.bounceEaseOut(1 - p, 1, 0, diff);
            return c - inv + firstNum;
        },
        bounceEaseOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            if (p < (1 / 2.75)) {
                return c * (7.5625 * p * p) + firstNum;
            }
            else if (p < (2 / 2.75)) {
                return c * (7.5625 * (p -= (1.5 / 2.75)) * p + .75) + firstNum;
            }
            else if (p < (2.5 / 2.75)) {
                return c * (7.5625 * (p -= (2.25 / 2.75)) * p + .9375) + firstNum;
            }
            else {
                return c * (7.5625 * (p -= (2.625 / 2.75)) * p + .984375) + firstNum;
            }
        },
        // ******* circ
        circEaseIn: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return -c * (Math.sqrt(1 - (p /= 1) * p) - 1) + firstNum;
        },
        circEaseOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return c * Math.sqrt(1 - (p = p / 1 - 1) * p) + firstNum;
        },
        circEaseInOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            if ((p /= 0.5) < 1)
                return -c / 2 * (Math.sqrt(1 - p * p) - 1) + firstNum;
            else
                return c / 2 * (Math.sqrt(1 - (p -= 2) * p) + 1) + firstNum;
        },
        // ******* cubic
        cubicEaseIn: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return c * (p /= 1) * p * p + firstNum;
        },
        cubicEaseOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return c * ((p = p / 1 - 1) * p * p + 1) + firstNum;
        },
        cubicEaseInOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            if ((p /= 0.5) < 1)
                return c / 2 * p * p * p + firstNum;
            else
                return c / 2 * ((p -= 2) * p * p + 2) + firstNum;
        },
        // ******* elastic
        elasticEaseIn: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            if (p == 0) return firstNum;
            if (p == 1) return c;
            var peroid = 0.25;
            var s;
            var amplitude = c;
            if (amplitude < Math.abs(c)) {
                amplitude = c;
                s = peroid / 4;
            }
            else {
                s = peroid / (2 * Math.PI) * Math.asin(c / amplitude);
            }
            return -(amplitude * Math.pow(2, 10 * (p -= 1)) * Math.sin((p * 1 - s) * (2 * Math.PI) / peroid)) + firstNum;
        },
        elasticEaseOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            if (p == 0) return firstNum;
            if (p == 1) return c;
            var peroid = 0.25;
            var s;
            var amplitude = c;
            if (amplitude < Math.abs(c)) {
                amplitude = c;
                s = peroid / 4;
            }
            else {
                s = peroid / (2 * Math.PI) * Math.asin(c / amplitude);
            }
            return -(amplitude * Math.pow(2, -10 * p) * Math.sin((p * 1 - s) * (2 * Math.PI) / peroid)) + c;
        },
        // ******* expo
        expoEaseIn: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return (p == 0) ? firstNum : c * Math.pow(2, 10 * (p - 1)) + firstNum - c * 0.001;
        },
        expoEaseOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return (p == 1) ? c : diff * 1.001 * (-Math.pow(2, -10 * p) + 1) + firstNum;
        },
        expoEaseInOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            if (p == 0) return firstNum;
            if (p == 1) return c;
            if ((p /= 0.5) < 1)
                return c / 2 * Math.pow(2, 10 * (p - 1)) + firstNum - c * 0.0005;
            else
                return c / 2 * 1.0005 * (-Math.pow(2, -10 * --p) + 2) + firstNum;
        },
        // ******* quad
        quadEaseIn: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return c * (p /= 1) * p + firstNum;
        },
        quadEaseOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return -c * (p /= 1) * (p - 2) + firstNum;
        },
        quadEaseInOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            if ((p /= 0.5) < 1)
                return c / 2 * p * p + firstNum;
            else
                return -c / 2 * ((--p) * (p - 2) - 1) + firstNum;
        },
        // ******* quart
        quartEaseIn: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return c * (p /= 1) * p * p * p + firstNum;
        },
        quartEaseOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return -c * ((p = p / 1 - 1) * p * p * p - 1) + firstNum;
        },
        quartEaseInOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            if ((p /= 0.5) < 1)
                return c / 2 * p * p * p * p + firstNum;
            else
                return -c / 2 * ((p -= 2) * p * p * p - 2) + firstNum;
        },
        // ******* quint
        quintEaseIn: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return c * (p /= 1) * p * p * p * p + firstNum;
        },
        quintEaseOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return c * ((p = p / 1 - 1) * p * p * p * p + 1) + firstNum;
        },
        quintEaseInOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            if ((p /= 0.5) < 1)
                return c / 2 * p * p * p * p * p + firstNum;
            else
                return c / 2 * ((p -= 2) * p * p * p * p + 2) + firstNum;
        },
        // *******  sine
        sineEaseIn: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return -c * Math.cos(p * (Math.PI / 2)) + c + firstNum;
        },
        sineEaseOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return c * Math.sin(p * (Math.PI / 2)) + firstNum;
        },
        sineEaseInOut: function (p, n, firstNum, diff) {
            var c = firstNum + diff;
            return -c / 2 * (Math.cos(Math.PI * p) - 1) + firstNum;
        }
    }
});

调用:
$("#div").animate({
    left: v
}, 1000, "circEaseOut");
Javascript 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 #Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 #Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 #Javascript
JS如何将UTC格式时间转本地格式
Sep 04 #Javascript
js 窗口抖动示例
Sep 04 #Javascript
js格式化货币数据实现代码
Sep 04 #Javascript
jQuery父级以及同级元素查找介绍
Sep 04 #Javascript
You might like
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
python安装与使用redis的方法
2016/04/19 Python
python中redis的安装和使用
2016/12/04 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python实现图片插入文字
2019/11/26 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
python Shapely使用指南详解
2020/02/18 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
大一军训感言
2014/01/09 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
《小池塘》教学反思
2014/02/28 职场文书
会计演讲稿范文
2014/05/23 职场文书
物业管理专业求职信
2014/06/11 职场文书
单位委托函范文
2015/01/29 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
GO中sync包自由控制并发示例详解
2022/08/05 Golang
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript