动画 GIF 背景仅显示一次

Animated GIF background only showing once

本文关键字：一次 显示 GIF 背景 动画      更新时间：2023-09-26

所以在点击这些宝丽来图像时，我用jQuery的.replaceWith()将它们替换为<div class="poof"></div>。我这样做的原因是显示一个 poof 动画 gif 动画，我用 js 为该类设置样式。

但是，单击.polaroid，宝丽来图像，.poofdiv每次都会替换该html，但其背景从未显示。

在这里亲自尝试一下：

单击图像，它将被.poofdiv 替换，但不显示 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;
 }

您正在获取在 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);
});
相关文章：