jquery自定义动画


总路程是150像素
总时间是2000毫秒
想实现的效果是由快变慢再到快
1，用插件
2，自定义
我想知道怎样去自定义这样一个函数，没思路，头疼

解决方案 »

  1.   

    $('#sw1').animate({left: 685},100).animate({left: 670},200).animate({left: 655},300).animate({left: 640},400).animate({left: 625},500).animate({left: 610},600).animate({left: 595},450).animate({left: 580},300).animate({left: 565},150).animate({left: 550},50);
    类似的这个情况，但这个是断断续续的，需要的是连贯的，惯性的效果
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>animate.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
         $(function () {    
         go();
         });
        
         var times = 0;
        var left = 1000;
        var step = 0;
         function go() {
        step += 100;
        left -= 35;
        $('#sw1').animate({left: left}, step);
        if (left <= 895 && left > 565) {
        step -= 150;
        } else {
        step += 100;
        }   
        
         if (left <= 550 && times >= 2000) {
         return;
         }
         window.setTimeout("go()", 100);
         times += 100;
        }
        </script>  </head>
      
      <body>
        <div id="sw1" style="width: 200px; height: 200px; border: 1px solid red; position: absolute; left: 1000px;">
        
        </div>
      </body>
    </html>
      

  3.   

     自定义也就是一个算子函数
    jQuery.extend(jQuery.easing,{
        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;
        }
    })
    调用方法：
    obj.animate({top:xx},{queue:true,duration:800,easing:"quintEaseOut",complete:function() {}});