动画GIF背景仅显示一次

Question

So on click of these polaroid like images, I replace them with <div class="poof"></div> using jQuery's .replaceWith() . The reason I do this is to display a poof animated gif animation that I style to that class with js.

However, on click of the .polaroid , the polaroid images, the .poof div replaces that html every time, but its background never shows.

Try it for yourself, here :

Click an image, it is replaced by the .poof div, but the poof animation doesn't show.

I would greatly appreciate it someone could help me figure out why this is and how to get the animation to show each time.

Here is my 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++;
        });
});

Here is .poof 's CSS:

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

Answer 1

You are getting the height and width of an object that was remove / replaced in the DOM

Change to this:

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