javascript - 使用 Javascript 而没有 Jquery 的 FadeIn 和 FadeOut

Question

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

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 更改 opacity 属性，并且该更改也将被动画化。

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

Answer 2

与可空性建议不同，您可以仅使用包含延迟的 CSS 完全完成此操作，不涉及添加的类。这是一个证明它的小提琴

HTML：

<div id='map'>
    <div id='overlay'></div>
</div>

CSS：

#map {
    height:100px;
    width:100px;
    background:red;
}
#overlay {
    z-index:2;
    background:black;
    height:100px;
    width:100px;
    opacity:0;
    -webkit-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;

    transition-delay: 2s;
    -webkit-transition-delay: 2s;
}
#overlay:hover {
    opacity:.8;    
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}