CODEWITHSUNDEEP
javascriptjquerycssgifanimated-gif
gomangomango
gomangomango

Reputation: 691

Animated GIF background only showing once

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

Upvotes: 0

Views: 647

Answers (1)

gomangomango
gomangomango

Reputation: 691

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

Upvotes: 1

Related Questions