用於fadeOut的交換'display none'

如何修改它以便淡出並自行移除？用於fadeOut的交換'display none'

<script> 
close = document.getElementById("close"); 
close.addEventListener('click', function() { 
    preloader = document.getElementById("preloader"); 
    preloader.style.display = 'none';  <--- this part, obviously 
}, false); 
</script>

點擊「顯示：無」感覺太刺耳/不舒服。謝謝！

來源

2012-12-13 user1691389

最簡單的方法是使用jQuery的。如果沒有，你需要做一個改變不透明度的函數。 – kennypu

取決於什麼瀏覽器，你需要支持，你可以使用CSS的過渡要做到這一點：

.fadeOut{ 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-out; 
    -moz-transition: opacity .5s ease-out; 
    -o-transition: opacity .5s ease-out; 
    transition: opacity .5s ease-out; 
}

的.fadeOut只需添加 - 類的元素，進一步的信息，轉換，見MDN article。兼容的瀏覽器列表可以在caniuse.com

除此之外可以看出，如jQuery庫有內置的淡入/淡出 - 效果，這是使用JavaScript實現公正和對所有主流瀏覽器在那裏兼容。（jQuery APi -> fadeOut）

如果您希望在不使用jQuery的情況下執行此操作，可以查看它們是如何直接在源代碼中實現的。 jsapi.info是一個不錯的代碼瀏覽器，它鏈接使用的內部函數，讓您有機會快速查看所調用的內容以及被調用函數的外觀。

編輯：

此外，我只是偶然在上Codereview.SE一個問題，可以幫助你：Fade In Fade Out in pure JavaScript

來源

2012-12-13 01:22:14 GNi33

用於fadeOut的交換'display none'

回答

相關問題