When I click on these images that resemble polaroids, I use jQuery's .replaceWith() to replace them with
<div class="poof"></div>However, every time I click on the .polaroid images, the .poof div replaces the HTML content but its background remains invisible.
You can try it out for yourself here:
Click on an image, and it will be replaced by the .poof div. However, the poof animation fails to appear.
I would greatly appreciate any assistance in figuring out why this happens and how to ensure the animation displays each time.
This is the JavaScript code I am using:
$(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++;
});
});
Below is the CSS for .poof:
.poof{
height:32px;
width:32px;
}