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

我有一個圖像地圖，當用戶將鼠標懸停在地圖上時，我想淡入一個帶有懸停內容信息的小型div，然後在鼠標離開地圖時淡出延遲了兩秒鐘。使用Javascript FadeIn和FadeOut並且不使用Jquery

2013-07-25 Bob

可能重複http://stackoverflow.com/questions/5104053/fade-effect -using-javascript-no-jquery） –

可以通過添加您嘗試的內容以及您的實際問題是什麼來澄清您的問題？ – yadutaf

這可以通過使用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這樣的舊瀏覽器，但它應該會優雅地降級。

來源

2013-07-25 17:54:04 nullability

我可以通過僅使用腳本編輯div的樣式來更改它嗎？像，用一個簡單的函數改變不透明度和過渡？ – Bob

這不是我的意思。我可以直接影響它的風格，而不是使它活躍。 – Bob

是的，那是可能的。你不需要活動課;該過渡將激活對不透明度的任何更改，所以如果以編程方式將不透明度設置爲另一個也可以工作的值。 – nullability

不像可空性暗示的那樣，你可以完全用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的淡入淡出效果（

來源

2013-07-25 18:26:31

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

回答

相關問題