javascript - 不透明度+随机移动的随机时间

Question

我正在尝试创建一个 div 的随机移动(成功)，并与随机不透明度变化相关(部分成功)。我通过将两个单独的脚本合并为一个来整理以下内容。

不透明度仅在每次移动 div 后发生变化。最终，我想让不透明度独立于运动而工作。任何帮助将不胜感激!

我在 jsFiddle here 里有它，或者:

HTML:

<div id="container">
<div class="a"></div>
</div> 

CSS:

div#container {height:500px;width:100%;}

div.a {
   width: 284px;
   height:129px;
   background:url(http://www.themasterbetas.com/wp-content/uploads/2013/08/aliens.png);
   position:fixed;
 }

jQuery:

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

function makeNewPosition($container) {
    // Get viewport dimensions (remove the dimension of the div)
    $container = ($container || $(window));
    var h = $container.height() - 50;
    var w = $container.width() - 50;

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

    return [nh, nw];
}

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

    $('.a').animate({
        top: newq[0],
        left: 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;
}

function runIt() {
    var $fading = $('.a');
    $fading.fadeTo("fast", Math.random(), runIt);
}

Answer 1

要使它们独立动画，您需要做的就是将动画应用到不同的元素上。我创建了另一个更改其位置的 div (.wrapper)，而其子项 (.a) 更改其不透明度。

这是新的 HTML:

<div id="container">
    <div class='wrapper'>
        <div class='a'></div>
    </div>
</div>

jsFiddle Demo