javascript - Random timing for Opacity + Random movement -

i'm trying create random movement of div (successful), tied random opacity changes (partially successful). i've put following mashing 2 separate scripts one.

the opacity changes after each movement of div. i'd opacity work independent of movement. appreciated!

i have in jsfiddle here, or:

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) {     // viewport dimensions (remove dimension of 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); } 

to make them animate independently need apply animations on different elements. i've created div (.wrapper) changes position, while child (.a), changes opacity.

here's new html:

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

jsfiddle demo