首頁 > web前端 > js教程 > 主體

Jquery中為animation加上更多的運作效果實例_jquery

WBOY
發布: 2016-05-16 17:23:22
原創
1236 人瀏覽過

複製程式碼 程式碼如下:

//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                  }
            else if (p               return c * (7.5625 * (p -= (1.5 / 2.75)) * p .75) firstNum      else if (p                 返回c * (7.5625 * (p -= (2.25 / 2.75)) * p .9375) firstNum;
                    return c * (7.5625 * (p -= (2.625 / 2)) . 75 )) * p .984375) firstNum;
            }
       EaseIn: 函數(p, n, firstNum, diff) {
var c =firstNum diff;
            return -c * (Math.sqrt(1 - (p /= 1) * p) -   circEaseOut: 函數(p, n, firstNum, diff) {
            var c = firstNum diff;
                },
circEaseInOut: function ( p, n, firstNum, diff) {
            var c = firstNum diff;
  1)
                return -c / 2 * (Math.sqrt(1 - p * p) - 1) firstNum;
            return c / 2 * (Math.sqrt(1 - (p -= 2) * p) 1) firstNum;
        },
        // ********cubic
        // ********cubic
           var c = firstNum diff;
            return c * (p /= 1) * p * p firstNum;
      ) {
            var c = firstNum diff ;
            return c * ((p = p / 1 - 1) * p * p 1)firstNum;
      iff) {
            var c =firstNum diff;
            if ((p /= 0.5)
                else
                return c / 2 * (( p- = 2) * p * p 2)firstNum;
        },
        // ******** elastic
        elasticEaseIn: function (p, n, firstNum, diff) {            if (p == 1) return c;
          🎜>            varamplitude = c;
            if (振幅                振幅= c;
                         else {
                s = 週期/ (2 * Math.PI) * Math.asin(c / 振幅) ;
            }
            return -(振幅* Math.pow(2, 10 * (p -= 1)) * Math Math.sin(pp. )) firstNum;
        },
        elasticEaseOut: function (p, n, firstNum,            if (p == 0) return firstNum;
if (p == 1) return c;
            var peroid = 0.25;
        🎜>            if (amplitude 振幅= c;
                            s = 週期/ (2 * Math.PI) * Math.asin(c / 行程);
            } }
            return -(振幅* Math.pow(2, -10 * p) * Math.sin((p * 1 - s) * (2 * Math.PI) / 週期)) c;
},
        // ******** expo
        expoEaseIn: function (p, n, firstNum, diff) {        },
          },
            var c =firstNum diff;
            return (p == 1) ? c : diff * 1.001 * (-Math.pow(2, -10 * p) 1) firstNum;
        },
          },
              var c = firstNum diff;
            if (p == 0) return firstNum;
        if ((p /= 0.5)                 return c / 2 * Math.pow(2, 10 * (p - 1)) firstNum - c * 0.0005;
            else
         pow(2, -10 * --p ) 2)firstNum;
        },
        // ********quad
       quadEaseIn: function (p, n, firstNum, diff) {        },
       quadEaseOut: function (p, n, firstNum, >            return -c * (p /= 1) * ( p - 2)firstNum;
        },
       quadEaseInOut: function (p. 🎜>            if ((p /= 0.5)                 return c / 2 * p * p firstNum;
        turn -c / 2 * ((--p) * (p - 2) - 1) firstNum;
        },
        // ******** quart
        quartEaseIn: function (p, n, firstNum, diff) {        },
        quartEaseOut: function (p, n, f 🎜>            return -c * ((p = p / 1 - 1) * p * p * p - 1) firstNum;
        },
        = firstNum diff;
            if ( (p/=0.5)                return c / 2 * p * p * p * p firstNum;        },
        // ******** quint
       c = firstNum diff;
            return c * ( p /= 1) * p * p * p * p firstNum;
        },
        quintEaseOut:  stNum diff;
            return c * ((p = p / 1 - 1) * p * p * p * p 1) firstNum;
        },
           var c = firstNum diff;
if(((p / = 0.5)
回傳c / 2 * p * p * p * p * p * p * p firstnum;
else
回傳c / 2 *((p-) = 2) * p * p * p * p 2) firstNum;
        },
        // *******  sine       // *******  sine  firstNum, diff ) {
            var c = firstNum diff;
             },
        sineEaseOut: function (p, n, firstNum, diff) {
           p * (Math.PI / 2)) firstNum;
        },
        sineEaseInOut: function (p, n, firstNum, diff) {
        return -c / 2 * (Math.cos(Math.PI * p) - 1 ) firstNum;
        }
    }
});


呼叫:



呼叫> 代碼如下:$("#div").animate({    left: v}, 1000, "circEaseOut");

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板