Javascript 在随机、不断移动的位置临时替换图像

在我之前查询的基础上，我得到了一张图片，

cat.jpg

，它正在被克隆、调整大小（精确地说是减半），然后通过jQuery的

.css（）

和

.animate（）

发送到页面上的一个随机位置。现在，当一只猫被点击时，我希望它在移除它之前在它的位置临时生成一个新的图像/元素。因此，事件的顺序是：

点击猫

猫爆炸成3只小小猫

单击的cat元素将被删除，一个新图像将临时替代它

Cat更换图像在设定的时间量（例如，1秒）后被删除

到目前为止，我就在这里。除了将新的小猫保持在文档边界内（我将自己解决）和替换图像之外，一切都很顺利。这是密码，这是密码：

  var explode;
  $('img.cat').click(explode=function() {
      var contW = $(document).width();
      var contH = $(document).height();

      for (var i = 1; i <= 3; i++){
        var source = $(this).position();
        var posNeg = Math.random() < 0.5 ? -1 : 1;
        var newTop = Math.floor(Math.random() * (contH / 2 + (posNeg * $(this).height()))) * posNeg;
        var posNeg = Math.random() < 0.5 ? -1 : 1;
        var newLeft = Math.floor(Math.random() * (contW / 2 + (posNeg * $(this).width()))) * posNeg;

        var $kitty = $(this).clone().css({
          width: $(this).width() / 2,
          height: $(this).height() / 2
        });
        $('#container').append($kitty);
        $kitty.css({ top: source.top, left: source.left })
          .animate({ top: newTop+'px', left: newLeft+'px' }, 300)
          .click(explode);
      }

      $(this).remove();
  });

当单击任何

img.cat

时，如何让狮子只显示一秒钟，并显示在猫的确切位置？

而不是

$（此）。删除（）

尝试用狮子替换猫

var $lion = $('<img id="replacement" src="http://images1.wikia.nocookie.net/__cb20130326142633/warriors/images/4/47/Lion.png" />')
$(this).replaceWith($lion);
setTimeout(function () {
    $lion.remove()
}, 1000)

var$lion=$（“”）
$（此）。替换为（$lion）；
setTimeout（函数（）{
$lion.remove（）
}, 1000)

---

演示：，

很接近，但它总是在屏幕中央加载狮子，而不是在单击任何一只猫的位置。我想这可以用CSS来纠正，对吧？你说的在被点击的猫的位置

是什么意思？daveycroqet你的意思是狮子的左上角应该在鼠标指针被点击的位置吗？我的意思是当你点击位于某个随机位置的小猫时，狮子应该出现在那里。每次你点击一只新的小猫，狮子就应该在小猫所在的地方。我的意思是狮子的左上角应该和你点击的小猫的左上角相匹配。
var $lion = $('<img id="replacement" src="http://images1.wikia.nocookie.net/__cb20130326142633/warriors/images/4/47/Lion.png" />')
$(this).replaceWith($lion);
setTimeout(function () {
    $lion.remove()
}, 1000)