欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-02-25 16:21:27
jquery中给animation加更多的运作效果实例。 . 代码如下: //animation jquery.extend({     easing:  ...

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

. 代码如下:


//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;
      &nbnbsp; },
        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;
        }
    }
});


调用:

. 代码如下:


$("#p").animate({
    left: v
}, 1000, "circeaseout");