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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
Js基础学习资料
Nov 23 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 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
PHP 常见郁闷问题答解
2006/11/25 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php 移除数组重复元素的一点说明
2008/11/27 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
python双向链表实现实例代码
2013/11/21 Python
Python开发常用的一些开源Package分享
2015/02/14 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
python实现简易云音乐播放器
2018/01/04 Python
python获取代码运行时间的实例代码
2018/06/11 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
Linux机考试题
2015/07/17 面试题
跟单文员的岗位职责
2013/11/14 职场文书
服装发布会策划方案
2014/05/22 职场文书
初中作文评语集锦
2014/12/25 职场文书
婚礼新人答谢词
2015/01/04 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
Python道路车道线检测的实现
2021/06/27 Python