【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画

【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画
HTML页面:
- 
- <div id="container">
- <div id="first"></div>
- <div id="second"></div>
- </div>
- 
- <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"><
```
页面CSS：
```
1. /*CSS源代码*/
2. #container{
3. position: absolute;
4. width: 320px;
5. height: 320px;
6. border:1px solid #ccc;
7. }
9. #first{
10. width: 100px;
11. height: 100px;
12. background: orange;
13. }
15. #second{
16. width: 100px;
17. height: 100px;
18. background: red;
19. position: absolute;
20. right:0;
21. bottom:0;
22. }
JS:

    var $first=$('#first');
    var $second=$('#second');

    (function firstMove(){
        $first.animate({
            "left":220,
            "top": 0,
        },400,"linear",function(){
            $first.animate({
                "left":220,
                "top":220
            },400,"linear",function(){
                $first.animate({
                    "left":0,
                    "top":220
                },400,"linear",function(){
                    $first.animate({
                        "left":0,
                        "top":0
                    },400,"linear",function(){
                        firstMove();
                    });
                });
            });
        });
    })();

    (function secondMove(){
        $second.animate({
            "right":220,
            "bottom":0
        },400,"linear",function(){
            $second.animate({
                "right":220,
                "bottom":220
            },400,"linear",function(){
                $second.animate({
                    "right":0,
                    "bottom":220
                },400,"linear",function(){
                    $second.animate({
                        "right":0,
                        "bottom":0
                    },400,"linear",function(){
                        secondMove();
                    });
                });
            });
        });
    })();

/*Javascript代码片段*/

var $first=$('#first');
var $second=$('#second');

function h(x, currentTime, beginningValue, changeValue, duration){
    if(beginningValue){
        if(x<0.25){
            return (0.25-x)*4;
        }else if(x<0.5){
            return 0;
        }else if(x<0.75){
            return (x-0.5)*4;
        }
        return 1;
    }else{
        if(x<0.25){
            return x*4;
        }else if(x<0.5){
            return 1;
        }else if(x<0.75){
            return (0.75-x)*4;
        }
        return 0;
    }
}

function v(x, currentTime, beginningValue, changeValue, duration){
    if(beginningValue){
        if(x<0.25){
            return 1;
        }else if(x<0.5){
            return (0.5-x)*4;
        }else if(x<0.75){
            return 0;
        }
        return (x-0.75)*4;
    }else{
        if(x<0.25){
            return 0;
        }else if(x<0.5){
            return (x-0.25)*4;
        }else if(x<0.75){
            return 1;
        }
        return (1-x)*4;
    }
}

$.extend( $.easing,
        {
            "v":v,
            "h":h
        });

(function firstMove(){
    $first.animate({
        "left":220,
        "top":220
    },{
        duration: 1600,
        specialEasing: {
            left: 'h',
            top: 'v'
        },
        complete: function() {
            firstMove();
        }
    });
})();

(function secondMove(){
    $second.animate({
        "left":0,
        "top":0
    },{
        duration: 1600,
        specialEasing: {
            left: 'h',
            top: 'v'
        },
        complete: function() {
            secondMove();
        }
    });
})();
相关阅读:
C++中new申请动态数组
 iOS 9之3D Touch功能
 在xcode找不到发布证书
 iOS 企业版打包
 iOS证书详解－－转载
 Failed to load the JNI shared library jvm.dl
Xcode7.3打包ipa文件报错和解决
 更新mac系统和更新到Xcode7.3版本出现的： cannot create __weak reference in file using manual reference counting
Sun jdk, Openjdk, Icedtea jdk关系
 terminal color
原文地址：https://www.cnblogs.com/lizihong/p/4325859.html