Question

我可以使用开场gif动画淡化以显示菜单和静态徽标吗？我希望在gif动画有时间播放之后，淡入淡出定时发生。然后它会消失 - 或者更好 - 交叉渐变到菜单和静态徽标。感谢。

Answer 1

它是<img>元素吗？如果是这样的话：

如果您移除<img>元素，页面将重排，按钮将向上移动以“填补空白”。
如果您使用display: none，则图片将无法显示且不占用空间（页面将重排，就像您已移除<img>一样）。
如果您使用visibility: hidden，则<img>将不可见，但会保留在原位。按钮将保持在不可见图像下方。

要使用JavaScript删除元素或编辑其CSS，首先需要获取对它的引用。一种方法是给它一个id并使用getElementById。然后，您可以操纵其style property或remove it from the DOM。

关于检测gif动画何时结束：我无法使用JavaScript和常规gif <img>元素检测到这一点。你必须依赖setTimeout。由于加载时间因访问者而异，因此您可以在图片具有finished loading时启动超时：

<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毫秒后使用给定的runtime（“disappearing_image”）逐渐淡出图像。

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

最后一点：不同的浏览器可能会以不同方式加载GIF动画。例如，一个浏览器可以在开始动画之前加载整个文件，而另一个浏览器可以在加载图像时为图像设置动画，然后触发onload并再次为其设置动画。如果您遇到麻烦，可以查看预加载您的图片（在此搜索“[javascript] preload img”）。

设定时间后淡出图像以显示菜单

1 个答案: