Javascript object starting with random position

I have 3 logo image (#logo, #logo2, #logo3) that move randomly around the page with my javascript:

 <script src="http://ift.tt/2fraWWd    /jquery.min.js"></script>
    <script type="text/javascript">
    function moveDiv() {
    var $span = $("#logo");

$span.fadeOut(500, function() {
    var maxLeft = $(window).width() - $span.width();
    var maxTop = $(window).height() - $span.height();
    var leftPos = Math.floor(Math.random() * (maxLeft + 10))
    var topPos = Math.floor(Math.random() * (maxTop + 10))

     $span.css({ left: leftPos, top: topPos }).fadeIn(2500); 

 });
 };

  moveDiv();
  setInterval(moveDiv, 2500);
    </script>

My problem is that all of them start at the same position in the page (on top left corner) overlapping by themselves, only for the duration of the first fadeout. How can I let them start in a random position around the page since the first click on my webpage?

Thanks,

Michele