Создание дублирующих элементов в случайных позициях

Поскольку мой предыдущий вопрос, расположенный здесь, технически неосуществим на данный момент (html2canvas не будет правильно отображать мои элементы, поскольку он принимает только "моментальные снимки"), я придерживаюсь другого подхода.

По сути, когда объект щелкнут, я хочу, чтобы он исчез, а затем несколько меньших его версий разбросаны по экрану в случайном порядке. Итак, для простоты возьмите изображение кота (cat.jpg): при нажатии на него должно показаться, что он взрывается на три небольших изображения cat.jpg, которые бросаются вокруг экрана. Между тем, оригинальный cat.jpg затем скрыт.

Мой (теперь полностью функциональный) код:

  $('#cat').click(function() {
    $(this).hide();
    for (var j = 1; j <= 3; j++) {
      $('#content').append('<span><img class="cat" src="cat.jpg" /></span>');
    }
    $('#cat').css("position", "relative");
    $('img.cat').each(function(i) {
      var newTop = Math.floor(Math.random()*500)*((i%2)?1:-1);
      var newLeft = Math.floor(Math.random()*500)*((i%2)?1:-1);
      $(this).css({position: "relative",
        top: 0,
        left: 0
      }).animate({
        top: newTop,
        left:newLeft
      }, 1000);
    });
  });

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

Изменение: я обновил свой код версией, которая фактически работает почти точно, как мне хотелось бы, но я все еще ищу предложения и улучшения любого вида. Я дам ответ всем, кто показывает мне лучший метод.