Question

我正在尝试构建一个动画效果，其中一个div将向另一个div浮动，当它到达第二个div区域时，浮动div将淡出。移动方向将是这样的< strong> 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会在其他人静止的地方浮动。首先 A div将向 D 浮动，当触及 D 时， A 将淡出。其次， A div将从开始向 C 浮动，当触及 C 时， A 将淡出。第三， 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/

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

1 个答案: