欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2021-04-04 10:13:48|栏目:jquery|点击:

复制代码 代码如下:

//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");

上一篇:jquery插件开发注意事项小结

栏    目:jquery

下一篇:JQuery+div+css 无限级联树实现代码

本文标题:Jquery中给animation加更多的运作效果实例

本文地址:http://www.codeinn.net/misctech/94101.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有