javascript - 使用 Javascript 而不是 Jquery 的 FadeIn 和 FadeOut

Question

我有一个图像 map ，当用户将鼠标悬停在 map 上时，我想淡入一个包含悬停内容信息的小 div，然后在鼠标离开 map 时淡出两秒钟的延迟。

Answer 1

可以通过使用 CSS 过渡动画不透明度来实现淡入淡出效果:

.small_div {
    opacity: 0;
    -webkit-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.small_div.active {
    opacity: 1
}

要使用这个类，您需要一些 javascript 在图像映射悬停时添加 .active 类，并用必要的数据填充 .small_div .

如果您不想使用类，您可以直接使用 javascript 更改不透明度属性，并且该更改也会被动画化。

请注意，这不适用于 IE8 等较旧的浏览器，但它应该会正常降级。