Question

因此，点击这些类似宝丽来的图像，我使用jQuery的<div class="poof"></div>将其替换为.replaceWith()。我这样做的原因是显示一个动画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);
});

动画GIF背景只显示一次

1 个答案: