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 相关文章推荐
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
js实现日期级联效果
Jan 23 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
Vue常用指令详解分析
Aug 19 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
js模拟类继承小例子
2010/07/17 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
python学习 流程控制语句详解
2016/06/01 Python
Python图算法实例分析
2016/08/13 Python
flask 实现token机制的示例代码
2019/11/07 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
高校教师思想汇报
2014/01/11 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
鸿星尔克广告词
2014/03/21 职场文书
员工自我工作评价
2015/03/06 职场文书
营业员岗位职责范本
2015/04/14 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers