Question

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

点击猫。
猫会爆炸成3只小猫。
已删除Clicked cat元素，暂时取代新图像。
在设定的时间（例如，一秒钟）后删除猫替换图像。

这是我到目前为止的地方。除了将新的小猫保持在文档边界（我将自己解决）和替换图像之外，一切都取决于鼻子。这是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

暂时以随机，不断变换的位置替换图像

1 个答案: