javascript - 使用 Javascript 而非 Jquery 进行淡入和淡出

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 在图像 map 悬停时添加 .active 类，并使用必要的数据填充 .small_div .

如果您不想使用类，则可以直接使用 JavaScript 更改不透明度属性，并且该更改也会以动画形式显示。

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