jQuery: случайные позиции букв на клике

Question

Вот мой код:

$('div').html(function(i, html) {
  return html.replace(/(\d)/g, '<span>$1</span>');
});

$('div').click(function() {
  $('span').css({
    "left": Math.random() * window.outerWidth,
    "top": Math.random() * window.outerHeight
  })
});

body {
  width: 100vw;
  height: 100vh;
}

div {
  font-family: Arial;
  font-size: 9vw;
  text-transform: uppercase;
}

span {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Stackoverflow</div>

Возможно ли получить произвольные позиции для каждой буквы текста с плавной анимацией? Было бы так круто!

Answer 1

Это сделает работу

$(document).ready(function(){

 $('div').html(function (i, html) {
    var chars = $.trim(html).split("");
    return '<span>' + chars.join('</span><span>') + '</span>';
 });

  $('div').click(function() {
   $('span').each(function(){
       $(this).css({"position": "absolute"});
       $(this).animate({
          left: Math.random() * window.outerWidth / 2,
          top: Math.random() * window.outerHeight /2 ,
       });
   });
  });

});