javascript - 如何使用 jquery 将 div 动画化为不同的方向并淡出

Question

我正在尝试构建一个动画效果，其中一个div将漂浮到另一个div，当它到达第二个div区域时，漂浮的div将淡出。移动方向将是这样的<强> https://www.dropbox.com/s/2bpdbtycajuuk6a/1.JPG?dl=0 。为了更好地理解，我在这里提供了我的 html 和 css 代码。

html code....

<div id="outer_div"> 
            <div class='a'>A</div>
            <div class='b'>B</div>
            <div class='c'>C</div>
            <div class='d'>D</div>
        </div>

and css ....

div.a {
    width: 50px;
    height:50px;
    background-color:red;
    position:absolute;
    bottom:0;
    top:450px;
    left: 225px;
}

div.b {
    width: 50px;
    height:50px;
    background-color:green;
    position:absolute;
    bottom:0;
    top:225px;
    left: 0px;
}

div.c {
    width: 50px;
    height:50px;
    background-color:yellow;
    position:absolute;
    bottom:450px;
    top:0px;
    left: 225px;
}



div.d {
    width: 50px;
    height:50px;
    background-color:pink;
    position:absolute;
    bottom:225px;
    top:225px;
    left: 450px;
}

#outer_div {
    width: 500px;
    height:500px;
    background-color:blue;
    position:fixed;
}

这里有 4 个 div(A、B、C、D)。 A div 将漂浮在其他人静止的地方。一开始 A div 会向 D float ，当触及 D 时，A 会淡出。其次，A div 会从头开始向C float ，当触及C 时，A 会淡出。第三，A div 会从头开始向B float ，当触及B 时，A 会淡出。同样，动画将从头开始并像以前一样继续，此过程将持续 52 次 。我尝试使用此脚本但未能成功。

Scripts ....

    $(document).ready(function () {
            animateDiv();

        });

        function makeNewPosition() {

            // Get viewport dimensions (remove the dimension of the div)
            var h = -$("#outer_div").height() - 50;
            var w = -$("#outer_div").width()/2 - 50;

            var nh = h;
            var nw = w;
//            var nh = Math.floor(Math.random() * h);
//            var nw = Math.floor(Math.random() * w);

            return [nh, nw];

        }

        function animateDiv() {
            var newq = makeNewPosition();
            var oldq = $('.a').offset();
            var speed = calcSpeed([oldq.top, oldq.left], newq);

            $('.a').animate({top: newq[0], right: newq[1]}, speed, function () {
                animateDiv();
            });

        }
        ;

        function calcSpeed(prev, next) {

            var x = Math.abs(prev[1] - next[1]);
            var y = Math.abs(prev[0] - next[0]);

            var greatest = x > y ? x : y;

            var speedModifier = 0.1;

            var speed = Math.ceil(greatest / speedModifier);

            return speed;

        }

我无法理解 float div A 的方向概念 以及如何检测我的 float div 在其他 div 的区域中。请帮助我解决它的问题，以及我如何理解 jquery 中的动画方向概念(一些引用可以提供很大帮助)？

Answer 1

尝试

$(document).ready(function () {
    var a = $(".a")
    , elems = $("#outer_div div").not(a)
    , pos = function () {
        return $.map(elems, function (el, i) {
            return $(el).css(["left", "top"])
        }).reverse()
    }
    , curr = 0
    , max = 52
    , speed = 1000;
    (function animateDiv(el, p, curr, max) {
        if (!!p.length) {
            $(el)
            .animate({
                    left:p[0].left
                  , top: (parseInt(p[0].top) + $(el).height())
            }, speed, function () {
                $(this).fadeOut(100, function () {
                    $(this)
                    .css({"top": "450px", "left":"225px"})
                    .fadeIn(0);
                    p.splice(0, 1);
                    animateDiv(this, p, curr, max)
                })

            })
        } else if (curr < max) {
            ++curr;
            console.log(curr, max);
            animateDiv(el, pos(), curr, max)
        }
    }(a, pos(), curr, max))
});

div.a {
    width: 50px;
    height:50px;
    background-color:red;
    position:absolute;
    bottom:0;
    top:450px;
    left: 225px;
}
div.b {
    width: 50px;
    height:50px;
    background-color:green;
    position:absolute;
    bottom:0;
    top:225px;
    left: 0px;
}
div.c {
    width: 50px;
    height:50px;
    background-color:yellow;
    position:absolute;
    bottom:450px;
    top:0px;
    left: 225px;
}
div.d {
    width: 50px;
    height:50px;
    background-color:pink;
    position:absolute;
    bottom:225px;
    top:225px;
    left: 450px; 
}
#outer_div {
    width: 500px;
    height:500px;
    background-color:blue;
    position:fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="outer_div">
    <div class='a'>A</div>
    <div class='b'>B</div>
    <div class='c'>C</div>
    <div class='d'>D</div>
</div>

jsfiddle http://jsfiddle.net/83h17z25/2/