动画GIF背景只显示一次

Question

因此，在单击这些类偏振片图像时，我使用jQuery的<div class="poof"></div>来替换它们。我这样做的原因是为了显示一个动画gif动画，我使用js对该类进行样式设置。

然而，每次点击.polaroid**，(偏光体)图像的，** .poof div就取代了html，但是它的背景却没有显示出来。

你自己试试，给你：

单击一个图像，它将被.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);
});