使用Javascript FadeIn和FadeOut並且不使用Jquery

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更改不透明屬性，並且該更改也將動畫化。

請注意，這不適用於像IE8這樣的舊瀏覽器，但它應該會優雅地降級。

Answer 2

不像可空性暗示的那樣，你可以完全用CSS來做到這一點，包括延遲，不涉及添加的類。 Here is a fiddle to prove it

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; 
} 

的[？使用JavaScript沒有jQuery的淡入淡出效果（