Случайное время для непрозрачности + Случайное перемещение

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

Answer 2

jsFiddle Demo

Я рандомизированы скорость затухания, а также. Я думаю, что с этим можно сделать еще много, включая рандомизацию эффекта ослабления, некоторые цветные огни внизу и скорость движения. В целом, это довольно маленькая демонстрация!

JQuery

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

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 = $('.warp'); 
    var newq = makeNewPosition($target.parent()); 
    var oldq = $target.offset(); 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 
    $target.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 makeItSo() { 
    var $fading = $('.ufo'); 
    $fading.fadeTo((Math.random() * 400), Math.random(), makeItSo); 
} 

CSS

div#container { 
    height:500px; 
    width:100%; 
} 
div.ufo { 
    width: 284px; 
    height:129px; 
    background:url(http://www.themasterbetas.com/wp-content/uploads/2013/08/aliens.png); 
    position:fixed; 
} 
div.warp { 
    width: 284px; 
    height:129px; 
    position:fixed; 
} 

Markup

<div id="container"> 
    <div class="warp"> 
     <div class='ufo'></div> 
    </div> 
</div>