javascript - 在随机的、不断变化的位置临时替换图像

Question

根据我之前的查询，我有一张图像 cat.jpg，它正在被克隆、调整大小(准确地说是减半)，然后通过 jQuery 发送到页面上的随机位置.css() 和 .animate()。现在，当一只猫被点击时，我希望它在删除它之前暂时在它的位置生成一个新的图像/元素。所以事件的顺序是:

1. 点击猫。
2. 猫爆炸成 3 只小猫。
3. 被点击的猫元素被删除，一个新的图像暂时取代它。
4. 猫替换图像在设定的时间(比如一秒)后被删除。

这是我目前所处的位置。除了将新小猫保持在文档边界内(我将自己解决)和替换图像外，一切都已完成。这是 Fiddle ，这是代码:

  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();
  });

我知道我必须获得被点击的 $kitty(或者更确切地说 img.cat)的当前位置，并通过 CSS 将新对象设置为该位置，但我的实现存在缺陷。

        var $lion = $('#replacement').clone().css({
          top: newTop,
          left: newLeft,
        });
        $('#container').append($lion);

        <img id="replacement" src="http://images1.wikia.nocookie.net/__cb20130326142633/warriors/images/4/47/Lion.png" />

当点击任何 img.cat 时，如何让狮子只出现一秒钟，并出现在该猫的确切位置？

Answer 1

而不是 $(this).remove() 尝试用狮子替换猫

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)

演示:Fiddle , Make sure the image is displayed for 1 sec