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

Question

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

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

自己试试，在这里：

单击图像，它被.poofdiv 替换，但 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++;
        });
});

这是.poofCSS：

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