如何使div向不同的方向设置动画并使用jquery淡出

Question

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

HTML代码....

<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>

和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 ）。 一个 div将浮在别人都还在。 起初， 一个 div将向D浮动，当触及D时 ， A将逐渐消失。 其次， 一个 DIV将漂浮从向C中开始，触动C使用时，A将淡出。 第三， 一个 DIV将漂浮从向B中的开始，当触及B，A将淡出。 再次，annimation将从开始开始并像以前一样继续， 此过程将持续52次 。我已尝试使用此脚本但未能执行此操作。

脚本....

    $(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;

        }

我无法理解浮动div A的方向概念以及我将如何检测到我的浮动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/