0

我可以让打开的 gif 动画淡入淡出以显示菜单和静态徽标吗？我希望在 gif 动画有时间播放一次之后发生淡入淡出。然后它会消失——或者更好的是——交叉淡入淡出到一个菜单和一个静态标志。谢谢。

4

1 回答 1

0

它是一个<img>元素吗？如果是这样：

  • 如果您删除该<img>元素，页面将重排并且按钮将向上移动以“填补空白”。
  • 如果您使用display: none图像将不可见并且不会占用空间（页面将重新排列，就像您删除了一样<img>）。
  • 如果你使用visibility: hidden，<img>将是不可见的，但会留在原地。按钮将停留在不可见图像下方。

要使用 JavaScript 删除元素或编辑其 CSS，您首先需要获取对它的引用。一种方法是给它一个id并使用getElementById. 然后，您可以操作其样式属性或将其从 DOM 中删除。

关于检测 gif 动画何时完成：据我所知，无法使用 JavaScript 和常规 gif<img>元素检测到这一点。您将不得不依赖setTimeout。由于每个访问者的加载时间各不相同，因此您可以在图像完成加载后开始超时：

<img src="img/animation.gif" id="disappearing_image" />

var img = document.getElementyById('disappearing_image');
var runtime = 1200; // in milliseconds

img.onload = function() {
    setTimeout(function() {
        $(img).fadeOut("slow");
    }, runtime);
    img.onload = null;
};

这将在几毫秒后淡出具有给定id（“disappearing_image”）的图像。runtime

请注意，我将onload处理程序设置回null事件处理后。这是因为 Internet Explorer 会在加载图像时首先触发此事件，然后是动画的每一帧。

最后一点：不同的浏览器可能会以不同的方式加载动画 gif。例如，一个浏览器可能会在开始动画之前加载整个文件，而另一个浏览器可能会在图像加载时对其进行动画处理，然后onload再次触发并对其进行动画处理。如果遇到麻烦，可以考虑预加载图像（在 SO 上搜索“[javascript] preload img”）。

于 2013-08-07T03:49:17.920 回答