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 相关文章推荐
js模拟类继承小例子
Jul 17 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
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
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php对数组排序代码分享
2014/02/24 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
js面向对象编程总结
2017/02/16 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
ES6学习教程之块级作用域详解
2017/10/09 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
vue mounted组件的使用
2018/06/18 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
副董事长岗位职责
2014/04/02 职场文书
大学自主招生推荐信
2014/05/10 职场文书
青年标兵事迹材料
2014/08/16 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
朋友聚会开场白
2015/06/01 职场文书
音乐之声观后感
2015/06/04 职场文书
文艺演出主持词
2015/07/01 职场文书
师德师风培训感言
2015/08/03 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript