javascript - 动画 GIF 背景只显示一次

Question

所以在点击这些类似宝丽来的图像时，我将它们替换为 <div class="poof"></div>使用 jQuery 的 .replaceWith() .我这样做的原因是为了显示我用 js 为该类设置样式的 poof 动画 gif 动画。

但是，点击 .polaroid ，宝丽来图像，.poof div 每次都会替换该 html，但它的背景从不显示。

Try it for yourself, here :

点击一张图片，它被替换为.poof div，但是 poof 动画没有显示。

如果有人能帮我弄清楚这是为什么以及如何让动画每次都显示，我将不胜感激。

这是我的javascript:

   $(function(){
        var time=1;
        $('.polaroid').click(function(){
            $(this).replaceWith('<div class="poof"></div>');
            $('.poof').css('height', $(this).height()).css('width', $(this).width()).css('background', 'transparent url(poof.gif?t='+time+') center no-repeat');
            time++;
        });
});

这里是 .poof的 CSS:

.poof{
    height:32px;
    width:32px;
 }

Answer 1

您正在获取在 DOM 中删除/替换的对象的高度和宽度

更改为:

var heights = 32;
var widths = 32;
$('.polaroid').click(function(){
    heights = $(this).height();
    widths = $(this).width();
    $('.poof').css('height', heights).css('width', widths).css('background', 'transparent url(http://i.imgur.com/FsVe2LC.gif?t='+time+') center no-repeat');
    time++;
    setTimeout(function(){
        $('.poof').remove();
    }, 1500);
});